CSS选择器的优先级和权重。

定义:CSS选择器的优先级和权重是用来确定当多个选择器应用于同一个元素时,哪个选择器的规则将会生效。以下是CSS选择器优先级和权重的解释:

CSS选择器的优先级:

1.内联样式:应用于HTML元素内部的style属性,具有最高的优先级。如


2.ID选择器:通过元素的id属性选择元素,如#example,具有较高的优先级。如

3.类选择器(.class)、属性选择器([attribute="value"])、伪类选择器(:hover),优先级较低于ID选择器。
4.元素选择器(如div,p)和伪元素选择器(如::before),优先级较低于类选择器和属性选择器。
5.通用选择器(*)、子选择器(>)、相邻兄弟选择器(+),选择器的优先级相对较低。
6.继承样式:某些属性会被父元素继承到子元素,但它们的优先级最低,可以被其他选择器所覆盖。

CSS选择器的权重:
当多个选择器具有相同的优先级时,可以通过以下规则确定选择器的权重,权重越高的规则将覆盖权重较低的规则:

1.内联样式的权重为最高,权重值为1000。
2.每个ID选择器的权重值为100。
3.每个类选择器、属性选择器和伪类选择器的权重值为10。
4.每个元素选择器和伪元素选择器的权重值为1。
5.通用选择器、子选择器和相邻兄弟选择器的权重值为0。
6.若选择器包含了!important规则,则其权重值为无穷大,将覆盖其他所有规则。

总结:当多个选择器应用于同一个元素时,具有较高权重的选择器的样式规则将会生效。如果权重相同,则遵循"后来居上"的原则,后定义的样式会覆盖先定义的样式。

posted @ 2023-06-14 10:50  想要魔法棒  阅读(163)  评论(0编辑  收藏  举报