Question

我的导航栏中有一组无序列表链接到其他页面，我尝试设置我的CSS，以便所有ul锚点具有相同的颜色：活动颜色。

我的css doc非常高，我做了以下几点：

/* will be overridden by more specific selectors as needed */
ul a:active{
    color: black;
}

这不起作用。什么都不应该覆盖它并迫使活动状态保持相同的颜色。

我试图通过添加另一个选择器使其更具体，请参见下文：

.nav ul a:active{
    color: black;
}

它有效，除了我不明白为什么会出现这种情况，我还没有为其他任何地方分配一个值：所以第一个选择器应该可以做到。

我稍后在样式表中为锚点的正常状态添加了一些规则，见下文：

.nav ul a {
    display: block;
    padding: 20px;

    /*padding-right: 0 !important; wtf is this */
    /* important overrides media queries */
    font-size: 13px;
    text-align: center;
    color: #aaa;
    text-decoration: none;
    background-color: #f5f5f5;
}

我不认为这会覆盖我的第一个选择器......

Answer 1

这是因为类和伪类的特异性更重要。在您的情况下，按照大多数情况下最不具体：

.nav ul a:active：2个类（包括1个伪类）
.nav ul a：1个类+2个元素
ul a:active：还有1个（伪）类+2个元素，但在样式表中较早，因此它的特异性较低

希望这可以解释为什么添加.nav确实会有所作为。

Answer 2

根据W3C Selectors Level 3中的规范：

计算选择器中的ID选择器数量（= a）
计算选择器中类选择器，属性选择器和伪类的数量（= b）
计算选择器中的类型选择器和伪元素的数量（= c）
忽略通用选择器

<强>示例：

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

因此，当选择者具有相同的特异性时，最后一条规则是重要的规则，这就是你的情况下发生的事情。

选择器的细分：

Le's's数学：

第一个选择器组：两个类型选择器（c）ul＆amp; a和一个伪类（b）:active
第二个选择器组：一个类选择器（b）.nav和两个类型选择器（c）ul＆amp; a。

最终结果是同样的特异性：

ul a:active     /* a=0 b=1 c=2 -> specificity =  12 */
.nav ul a       /* a=0 b=1 c=2 -> specificity =  12 */

有用的资源：

W3C选择器等级3：http://www.w3.org/TR/selectors/#specificity
特异性计算器：http://specificity.keegan.st/
CSS特异性：你应该知道的事情：http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Answer 3

我不知道具体风格如何为您的网站寻找，但我可以给您一个总体提示：

如果您使用的是Google Chrome浏览器，则可以使用https://developer.chrome.com/devtools然后检查该元素，以查看该元素从哪个选择器（以及哪个样式表）获取其特定属性。

您也可以使用Firefox：https://developer.mozilla.org/en-US/docs/Tools或Internet Explorer https://msdn.microsoft.com/en-us/library/gg589500%28v=vs.85%29.aspx

执行此操作

编辑：

还找到了一个很好的链接，你可以阅读更多关于特异性的信息，因为你的目标是理解它：

https://css-tricks.com/specifics-on-css-specificity/

理解css特异性（a：主动伪类）

3 个答案: