CSS选择器的权重
最新回答
青烟离歌
2026-01-04 01:07:14
CSS选择器的权重决定了当一个元素同时被多个选择器作用时，哪个选择器的样式会最终生效，具体权重规则如下：行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器。
- 通用选择器：权重值为0，对最终样式的计算无实质影响。例如*{}选择所有元素，但不会增加样式优先级。
- 标签选择器：权重值为1，通过HTML标签名选择元素。例如p{}选择所有<p>标签，优先级较低。
- 类选择器：权重值为10，通过元素的class属性选择。例如.text{}选择所有class="text"的元素，优先级高于标签选择器。
- ID选择器：权重值为100，通过元素的id属性选择。例如#header{}选择id="header"的元素，优先级高于类选择器。
- 行内样式：权重值为1000，直接在HTML元素的style属性中定义样式，优先级最高。例如<p style="color:red;">的样式会覆盖外部CSS的规则。
权重计算规则：
- 权重由选择器中各部分的数值累加得到。例如.nav a{}（类选择器+标签选择器）的权重为10+1=11。
- 当多个选择器权重相同时，后定义的样式会覆盖先定义的样式（遵循“层叠”规则）。
- !important规则可覆盖所有其他样式，但需谨慎使用以避免维护困难。
热门标签
