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会让一个样式的优先级提升到最高。
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论