Blog

2024-06-11 12:33PM

1.CSS权重的优先级和等级定义如下：

权重的优先级从高到低依次为：行内样式 > ID 选择器 > 类选择器/属性选择器/伪类 > 标签选择器/伪元素

1）行内样式 (Inline Styles):

权重为 1000，这种方式的权重最高

直接写在HTML元素内部的样式，eg：

<div style="color: red;">

...

</div>

2）ID 选择器 (ID Selectors):

权重为 100

使用ID选择器(#id)的样式，eg:

#myid { color: blue; }

3）类选择器、属性选择器、伪类 (Class Selectors, Attribute Selectors, Pseudo-classes):

权重为 10

使用类选择器(.class)、属性选择器([attr="value"])和伪类(:hover)的样式，eg:

.myclass { color: green; }, [type="text"] { color: purple; }, :hover { color: orange; }

4）标签选择器、伪元素 (Type Selectors, Pseudo-elements):

权重为 1

使用标签选择器(如 div, p, h1)和伪元素(::before, ::after)的样式，eg:

div { color: black; }, ::before { content: ""; }

2.权重相加规则:

当一个元素应用多个选择器时,各选择器的权重值会相加，eg:

div.red { color: red; }

重为 1 + 10 = 11。

3.权重比较规则:

比较权重时,从高位(行内样式)开始逐位比较,直到有一位数值不同时确定优先级，eg:

#myid.blue { color: blue; }

权重为 100 + 10 = 110, 大于 div.red { color: red; } 的 11。

4."!important"规则:

使用!important可以覆盖普通的权重规则,但不能覆盖其他!important规则。

使用!important会让一个样式的优先级提升到最高。

返回>>

请登录后再发表评论。

评论列表:

目前还没有人发表评论