在CSS中,选择器是用来选择HTML元素并应用样式规则的一种方式。每个选择器都有一个与之相关联的权重,用来确定当多个规则应用到同一个元素时,哪个规则会优先生效。权重是由选择器的类型和组合方式来决定的。下面是一些常见的CSS选择器及其权重,按照优先级从低到高排列:
-
元素选择器(权重:1):例如,
p
选择器会选择所有段落元素。 -
类选择器(权重:10):例如,
.my-class
选择器会选择所有带有class="my-class"
属性的元素。 -
ID选择器(权重:100):例如,
#my-id
选择器会选择具有id="my-id"
属性的元素。 -
伪类选择器(权重:10):例如,
:hover
选择器会选择鼠标悬停在元素上的状态。 -
属性选择器(权重:10):例如,
[type="text"]
选择器会选择具有type="text"
属性的元素。 -
子元素选择器(权重:0):例如,
ul > li
选择器会选择<ul>
下的直接子元素<li>
。 -
相邻兄弟选择器(权重:0):例如,
h2 + p
选择器会选择与<h2>
元素相邻的第一个<p>
元素。 -
通用选择器(权重:0):例如,
*
选择器会选择所有元素,但通常不会用于为元素应用样式。
选择器的权重是根据上述规则计算的,当多个选择器应用到同一个元素时,具有更高权重的规则会覆盖具有低权重的规则。如果权重相同,则后定义的规则会覆盖先定义的规则。
请注意,权重是非常重要的,因为它们可以帮助你理解为什么某些CSS规则不起作用或被覆盖。在编写复杂的样式表时,了解选择器的权重是非常有用的,可以帮助你更好地控制页面的外观和行为。