CSS选择器及权重
1. 选择器有哪些
| 选择器 | 示例 | 说明 |
|---|---|---|
| 通配选择器 | * {} | 与任何元素都匹配 |
| 标签选择器 | h1 {} | 选择<h1>标签 |
| ID选择器 | #idName {} | 选择id为idName的元素 |
| 类选择器 | .className {} | 选择class为className的元素 |
| 标签属性选择器 | a[title] {} | 存在title属性的<a>元素 |
| 伪类选择器 | a:hover {} | 鼠标指针悬浮在<a>上的样式 |
| 伪元素选择器 | p::first-line {} | 向<P>文本的首行添加特殊样式 |
| 后代选择器 | p h1 {} | 只选择<p>元素中的<h1>元素（后代即可） |
| 子代选择器 | p > h1 {} | 只选择<p>元素中父子关系的<h1>元素（仅父子关系） |
| 相邻兄弟选择器 | h1 + p {} | <h1>和<p>拥有相同的父元素，只会选择与<h1>相邻的<p> |
| 通用兄弟选择器 | h1 ~ p {} | <h1>和<p>拥有相同的父元素，选择<h1>之后的所有<p> |
2. 选择器优先级
CSS选择器的优先级是：内联样式 > ID选择器 > 类选择器，伪类选择器，属性选择器 > 标签选择器
到具体的计算层⾯，优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：
（有些并不是选择器，但为了更好地说明问题，暂且将其列入）
| 选择器 | 权重计算公式 {A,B,C,D} |
|---|---|
继承 或 *{} | {0,0,0,0} |
| 每一个标签选择器 或 每一个伪元素选择器 | {0,0,0,1} |
| 每一个类选择器 或 每一个属性选择器 或 每一个伪类选择器 | {0,0,1,0} |
| 每一个ID选择器 | {0,1,0,0} |
| 存在内联样式 | {1,0,0,0} |
出现!important | ∞无穷大 |
注意：
若出现多个ID选择器，则计算公式会叠加。其他选择器计算方式相同。例如：
| 选择器 | 权重计算公式 {A,B,C,D} |
|---|---|
| 3个ID选择器 | {0,3,0,0} |
eg.
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) */
阅读剩余
版权声明：
作者：chun
链接：https://chun53.top/399.html
文章版权归作者所有，未经允许请勿转载。
THE END