css选择器优先级

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

从高到低的权重顺序：

1 !important

2 内联样式

3 ID选择器

4 class选择器；伪类选择器；属性选择器（这三个是一样的）

5 元素选择器；伪元素选择器（这两个是一样的）

6 通配符选择器 - *

7 元素的默认样式

优先级计算的一种说法

行内样式>ID>属性选择器、class、伪类>元素名、伪元素

权重分别对应：1000>100>10>1

优先级计算的另一种说法

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;

B 的值等于 ID选择器 出现的次数;

C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;

D 的值等于 标签选择器 和 伪元素 出现的总次数 。

#nav-global > ul > li > a.nav-link

以上代码套用上面的算法，依次求出 A B C D 的值：

因为没有内联样式 ，所以 A = 0;

ID选择器总共出现了1次， B = 1;

类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1；

标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3;

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)。

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

 

优先级比较规则: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的。

#nav-list .item {
    color: #f00;
}

.nav-list .item {
    color: #0f0;
}

算出 #nav-list .item 的优先级是 (0, 1, 1, 0), .nav-list .item 的优先级是 (0, 0, 2, 0)。 左边第一位都是0， 再看看左边第二位，前者是1，后者是0， 所以（0, 1, 1, 0） 的大于 (0, 0, 2, 0) ，即 #nva-list .item 大于 .nav-list .item，所以字体会是红色。

优先级的特殊情况

经过上面的优先级计算规则，可以知道内联样式的优先级是最高的，但是外部样式有没有什么办法覆盖内联样式呢？ !important可以。因为一般情况下，很少会使用内联样式 ，所以 !important 也很少会用到。如果不是为了要覆盖内联样式，建议不要使用 !important 。

如果内联样式用了 !important，是不是外部样式就没有办法了呢？比如下面的代码：

<div class="app" style="color:#f00!important">666</div>

.app {
    color: 0f0!important;
}

是的，这时候内联样式已经强大到不管外部样式怎么写都无法覆盖它了。这种情况在实际代码中是要杜绝的！千万不要在内联样式中使用 !important。

怎样覆盖!important？

第一种：

table td { height: 50px !important; }   // 优先级第三
.myTable td { height: 50px !important; }  // 优先级第二
#myTable td { height: 50px !important; }  // 优先级第一

第二种：

使用相同的选择器，但是置于已有的样式之后：

td { height: 50px !important; }

 

原文：https://www.cnblogs.com/yugege/p/9918232.html