理解css特异性(a:主动伪类)

时间:2015-11-10 20:20:59

标签: css selector pseudo-class css-specificity

我的导航栏中有一组无序列表链接到其他页面,我尝试设置我的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;
}

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

3 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

根据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 */

有用的资源:

答案 2 :(得分:0)

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

如果您使用的是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/