【JS Web 前端知识库】9.说一说样式优先级的规则是什么?

您所在的位置:网站首页 css默认样式的优先级是多少位的字符 【JS Web 前端知识库】9.说一说样式优先级的规则是什么?

【JS Web 前端知识库】9.说一说样式优先级的规则是什么?

2024-07-10 04:19| 来源: 网络整理| 查看: 265

9.说一说样式优先级的规则是什么?

得分点:

!important、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式

标准回答:

CSS样式的优先级应该分成四大类 第一类 !important: 😄无论引入方式是什么,选择器是什么,它的优先级都是最高的。 第二类 引入方式: 😄行内样式的优先级要高于嵌入和外链,嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序,在后面插入的会覆盖前面的。 第三类 选择器 😄选择器优先级:id选择器>(类选择器 | 伪类选择器 | 属性选择器 )> (后代选择器 | 伪元素选择器 )> (子选择器 > | 相邻选择器) > 通配符选择器 。 第四类 继承样式 😄是所有样式中优先级比较低的。 第五类 浏览器默认样式 😄优先级最低。

加分回答:

1.使用!important要谨慎: ① 定要优先考虑使用样式规则的优先级来解决问题而不是 !important ② 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important ③ 永远不要在你的插件中使用 !important ④ 永远不要在全站范围的 CSS 代码中使用 !important

2.优先级的比较 指的是相同的样式属性,不同样式属性优先级比较失效 比如:在设置max-width时注意,已经给元素的max-width设置了!important但是还不生效,很有可能就是被width覆盖了 举例:div最终的宽度还是200px

div { max-width: 400px !important; height: 200px; background-color: tomato; width: 200px; }

💞💖💓💗每个时代, ✨🌟⭐️💫都悄悄犒赏会学习的人。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3