本文已参与「新人创作礼」活动，一起开启掘金创作之路
css选择器
文章目录
选择器类型
- ID #id
- class .class
- 标签 p
- 通用 *
- 属性 [type=“text”]
- 伪类 ：hover
- 伪元素 ::first-line
- 子选择器、相邻选择器
css选择器权重值
| 选择器 | 权重 |
|---|---|
| !important | 权重 |
| !important | Infinity(无限大) |
| 行列样式 | 1000 |
| Id选择器 | 0100 |
| Class选择器/属性/伪类 | 0010 |
| 标签选择器 | 0001 |
| *通配符选择器 | 0000 (大于默认样式与继承验样式) |
| 继承样式 | 权重最小(比*通配符还小) |
注意：选择器的权重值不是一个确定的值，例如标签选择器的权重值为1，但是这个1是一个256进制数，就是0到255后+1才是1。就是说权重值2和1中间差了255。这表示256个权重值为1的选择器加一起才抵得上一个权重为2的，这在后面权重计算有用。
还有需要注意的是，！important的权重值虽然是正无穷，但其实也是可也计算的，比如正无穷+1或者*1，就是要比正无穷大，在计算机中正无穷的值，都是一个有界的。不是数学上无界的一个慨念！
权重计算方法
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。单一选择器直接比较权重，多个选择器则需要计算。
复杂的计算方法：
-
用1表示派生选择器的优先级
-
用10表示类选择器的优先级
-
用100标示ID选择器的优先级
- div.test1 .span var 优先级 1+10 +10 +1
- span#xxx .songs li 优先级1+100 + 10 + 1
- #xxx li 优先级 100 +1
