Question

任何人都知道如何实现第二个选择器（.resource-list li a [data-type =＆＃34; XXX＆＃34;]）的优先级高于第一个选择器（.resource-list [data- type =＆＃34; XXX＆＃34;] 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

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

这应该这样做。只需使用一个像a:not(s)一样真实的伪类。

它将通过：not语句中的选择器的优先级提高您的优先级。

或者，如评论中所述，当你不想打破旧版浏览器（如IE 8）时，可以在前面添加ul。如果.ressource-list始终是<ul>代码的一类，则可以执行此操作。

Answer 2

您还可以简单地将<ul>类型选择器绑定在类名称前面，.resource-list用于后两个选择器 - 因为IE9下的:not()不是supported：{{ 3}}

.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);
}

Answer 3

如果你不关心IE8（不支持:not()）

，那么bwoebi的解决方案就足够了

另一种方法是降低选择器第一部分的特异性。

.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/

CSS属性选择器优先级

3 个答案: