简述CSS3选择器优先级及计算？

八股文_CSS面试题 1 139

CSS3选择器优先级是由权重值来决定的，权重值越高的选择器优先级越高。计算优先级时，CSS规则会根据选择器的组成元素给出一个权重值，通常可以通过四个值来表示：a,b,c,d。这四个值分别代表以下内容：

优先级的计算规则是从左到右比较权重值，最高的优先级会被应用。

CSS选择器的优先级计算涉及到CSS选择器的不同类型，并根据它们的权重值来决定哪一条规则被应用。具体的计算方法通常如下：

行内样式 (<style> 标签内的 style 属性)：行内样式的优先级是最高的，如果元素有行内样式，那么它会覆盖大部分其他样式。
举例：
```
<div style="color: red;"></div>
```
这里的行内样式 style="color: red;" 会有 a=1, b=0, c=0, d=0 的优先级。
ID选择器：每个ID选择器的优先级比类选择器、元素选择器都高。每个ID选择器贡献一个b值。

举例：
```
#header { color: blue; }
```
这个规则的优先级是 a=0, b=1, c=0, d=0。
类选择器、属性选择器、伪类选择器：类选择器、属性选择器和伪类选择器的优先级相同，它们都贡献一个c值。

举例：
```
.box { color: green; }
[type="text"] { color: green; }
:hover { color: green; }
```
这些规则的优先级是 a=0, b=0, c=1, d=0。
元素选择器和伪元素选择器：元素选择器和伪元素选择器的优先级较低，它们贡献一个d值。

举例：
```
div { color: purple; }
p::before { content: "Hello"; }
```
这些规则的优先级是 a=0, b=0, c=0, d=1。

考虑以下代码：

<div id="content" class="box">
  <p class="text">Hello World!</p>
</div>

#content { color: red; }            /* ID选择器 */
.box { color: blue; }               /* 类选择器 */
div { color: green; }               /* 元素选择器 */

因此，color: red; 会应用于整个#content元素，但如果你对div做了样式修改，它不会覆盖#content中的ID选择器样式。

CSS选择器的优先级由权重值计算，包含行内样式、ID选择器、类选择器/属性选择器/伪类选择器、元素选择器/伪元素选择器，依次递减。通过合理设计选择器的结构，可以控制样式应用的优先级。