1

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

4

3 回答 3

1

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

这应该这样做。只需使用一个始终为真的伪类，例如a:not(s).

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

或者，如评论中所述ul，当您不想与旧浏览器（如 IE 8）中断时，可以在它前面加上前缀。如果.ressource-list将始终是<ul>标签的类，则可以执行此操作。

于 2013-06-06T13:10:26.357 回答
1

您也可以简单地<ul>在类名前面绑定一个类型选择器，.resource-list用于后面的两个选择器 - 因为在 IE9 下不支持:not()： 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);
}
于 2013-06-06T13:13:23.530 回答
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/

于 2013-06-06T13:15:29.950 回答