【CSS】选择器优先级

最新推荐文章于 2025-07-15 11:03:49 发布

转载最新推荐文章于 2025-07-15 11:03:49 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lijie33402/p/4595418.html

CSS的选择器优先级的权重

在 Selectors Level 3 规范中，一个选择器的优先级（权重）由依次串联的a、b、c三个标记来计算

a: ID选择器如#header
b: class选择器如.header 属性选择器如[title] 伪类如:link
c: 标签选择器如h1 伪元素选择器如::after

注意：伪类:not不参与优先级的计算

一些例子

只要一个选择器的 a>0，b=0，即使另外一个选择的a=0, b=161，那么前者的权重依然更大。

    a:link{
  color: red; /* 优先级:a=0,b=1,c=1 */
}

.test{
  color: yellow; /* 优先级:a=0,b=1,c=0 */
}

他们的权重（优先级）b是相等的，但是c标记中，前者大于后者，所以最终「a:link」生效显示为红色。

:not() 不参与优先级的计算但()里面的选择器要计算在内

    <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS Selectors Level</title>
    <style type="text/css">
    .inner:not(.outer) p {
        color: red;
    }
    
    .outer .inner p {
        color: orange;
    }
    </style>
</head>

<body>
    <div class="outer">
        <p>outer</p>
        <div class="inner">
            <p>inner</p>
        </div>
    </div>
</body>

</html>

这个inner会显示orange 因为两个优先级相同，下面的会覆盖上面的

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS Selectors Level</title>
    <style type="text/css">
    .inner:not(#outer) p {
        color: red;
    }
    
    .outer .inner p {
        color: orange;
    }
    </style>
</head>

<body>
    <div class="outer">
        <p>outer</p>
        <div class="inner">
            <p>inner</p>
        </div>
    </div>
</body>

</html>

而这个例子会显示蓝色，上面的:not()内的id选择器也要计算在内

参考链接：

1.知乎的讨论：http://www.zhihu.com/question/21777264
2.某博客：http://www.clanfei.com/2013/11/1731.html

转载于:https://www.cnblogs.com/lijie33402/p/4595418.html