CSS选择器权重

CSS选择器权重

CSS常用选择器

通配符 *、后代选择器、子选择器、相邻选择器、标签、类选择器、id选择器、内联样式、!important
通用选择器 / 通配符 *{ }
后代选择器 div p{ }
子选择器 div > p{ }
元素 / 标签 p{ }
类选择器 .red-line{ }
id #pageContainer{ }
内联样式 <p style=“color: red;”>一段文字</p>
!important p{ color: red !important; }

选择器权重

通用选择器、后代选择器、子选择器、相邻选择器 < 元素 / 标签 < 类选择器 < id选择器 < 内联样式 < !important
对应权重：
通用选择器( 0 )、后代选择器( 0 )、子选择器( 0 )、相邻选择器( 0 ) < 元素 / 标签 ( 1 ) < 类选择器 ( 10 ) < id选择器 ( 100 ) < 内联样式( 1000 ) < !important (无条件权重最高)
另外：

1. 继承来的样式权重最低，即无权值。
2. 权重计算结果相同时，哪个最后出现，就以哪个样式为准。

CSS选择器知识是页面样式的入门内容，后续有更多需要学习的知识哦！