你对 CSS 的权重和优先级了解吗? 可以简单说下 。
我们的回答可以通过以下方式来回答:
1. 权重:
1. 权重概念:
1. 权重, 是一个相对的概念, 是针对某一指标而言; 某一指标的权重是指该指标在整体评价中的相对重要程度 。
2. CSS权重 指的是 css 选择器的优先级, 优先级高的 css 样式会覆盖优先级低的 css 样式, 优先级越高说明权重越高, 反之亦然 。2. 优先级:
1. css优先级规则:
1. css 选择规则的权值不同时, 权值高的优先;
2. css 选择规则的权值相同时, 后定义的规则优先;
3. css 属性后面加 !important 时, 无条件绝对优先;
2. 权值的计算:
1. 第一等级: 代表 内联样式; 如 style="", 权值为 1,0,0,0 。
2. 第二等级: 代表 ID选择器; 如 #id="", 权值为 0,1,0,0 。
3. 第三等级: 代表 calss | 伪类 | 属性 选择器; 如 .class | :hover,:link,:target | [type], 权值 0,0,1,0 。
4. 第四等级: 代表 标签 | 伪元素 选择器; 如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1 。
5. 通用选择器 (\*), 子选择器(>), 相邻同胞选择器(+) 等选择器不在4等级之内, 所以它们的权值都为 0,0,0,0 。
3. 权值计算公式:
1. 权值 = 第一等级选择器\*个数, 第二等级选择器\*个数, 第三等级选择器\*个数, 第四等级选择器\*个数 。
4. 权值比较规则:
1. 当两个权值进行比较的时候, 是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值, 第二等级权重值, 第三等级权重值, 第四等级权重值)来进行比较的, 而不是简单的 1000\*个数 + 100\*个数 + 10\*个数 + 1\*个数 的总和来进行比较的, 换句话说, 低等级的选择器, 个数再多也不会越等级超过高等级的选择器的优先级的;
2. 总结比较经验:
1. 先从高等级进行比较, 高等级相同时, 再比较低等级的, 以此类推 。
2. 完全相同的话, 就采用 后者优先原则(也就是样式覆盖) 。
3. css 属性后面加 !important 时, 无条件绝对优先(比内联样式还要优先) 。
5. 选择器的优先级(继承不如指定):
1. css 属性 !important
2. 内联样式
3. ID 选择器(#id)
4. 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]
5. 元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)
6. 通用选择器(\*)
7. 继承的样式
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端面试题” 的相关专栏; 大概会有200+的文章。
如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。
有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。
激活谷谷主为您准备了激活教程，为节约您的时间请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/15597.html
