приоритет выбора атрибута CSS

Question

Кто-нибудь знает, как я могу добиться того, что второй селектор (.resource-list li a [data-type = "XXX"]) имеет более высокий приоритет, чем первый (.resource-list [тип данных = "XXX"] li a)? Без переупорядочения CSS?

.resource-list[data-type="jpg"] li a, 
.resource-list li a[data-type="jpg"] /* This should have the highest priority */ { 
    background-image: url(jpg.png); 
} 

.resource-list[data-type="pdf"] li a, 
.resource-list li a[data-type="pdf"] /* This should have the highest priority */ { 
    background-image: url(pdf.png); 
} 

Смотрите скрипку: http://jsfiddle.net/8bG2j/

Answer 1

bwoebi является достаточно хорошо, если вы не Не заботьтесь об IE8 (который не поддерживает :not())

Альтернативой является уменьшение специфичности первой части селекторов.

.resource-list[data-type="jpg"] a, /* less specific after omitting the "li" */ 
.resource-list li a[data-type="jpg"] { 
    color: black; 
} 

.resource-list[data-type="pdf"] a, 
.resource-list li a[data-type="pdf"] { 
    color: red; 
} 

http://jsfiddle.net/8bG2j/4/

Answer 2

http://jsfiddle.net/8bG2j/2/

Это должно сделать это. Просто используйте псевдокласс, который всегда прав, как a:not(s).

Он поднимет ваш приоритет приоритетом селектора внутри оператора: not.

В качестве альтернативы, , как указано в комментариях, вы можете префикс с ul, когда вы не хотите, чтобы разорвать со старыми браузерами (как IE 8). Вы можете это сделать, если .ressource-list всегда будет классом тега <ul>.

Answer 3

Вы также можете просто обязан селектор в <ul> типа перед именем класса, .resource-list для двух последних селекторов - в :not() ISNT supported ниже IE9: раствор fiddle

.resource-list[data-type="jpg"] li a, 
ul.resource-list li a[data-type="jpg"] { 
    background-image: url(jpg.png); 
} 

.resource-list[data-type="pdf"] li a, 
ul.resource-list li a[data-type="pdf"] { 
    background-image: url(pdf.png); 
}