怎样判断CSS样式选择器的优先级?id优先还是Class优先?
优先级排行榜 行内样式优先级最高 在CSS中,选择器的优先级是由选择器的特异性(specificity)决定的。 特异性是一个衡量CSS选择器权重的系统,它决定了当多个规则应用于同一个元素时,哪个规则将被应用。 选择器的优先级主要由以下四部分组成(从左到右): 行内样式(Inline styles):1,0,0,0 ID选择器:0,1,0,0 类选择器、属性选择器、伪类:0,0,1,0 元素选择器、伪元素:0,0,0,1 可见,在不叠加选择器的情况下,内联样式(...
优先级排行榜 行内样式优先级最高
在css中,选择器的优先级是由选择器的特异性(specificity)决定的。
特异性是一个衡量css选择器权重的系统,它决定了当多个规则应用于同一个元素时,哪个规则将被应用。
选择器的优先级主要由以下四部分组成(从左到右):
可见,在不叠加选择器的情况下,内联样式(行内样式)的优先级是最高的。
其次是id选择器起,类选择器、属性选择器、伪类选择器并列排在第三位。
而优先级最低的选择器是元素选择器、伪元素。
什么是元素选择器、伪元素
元素选择器是基于html元素的标签名称来命名的选择器,比如如下的例子。
元素选择器直接对应文档树中的元素,并且是最基本的css选择器。
伪元素则是用来创建一些不在文档树中的元素,但可以对其进行样式化。伪元素通过在元素选择器后面添加双冒号::和伪元素名称来使用。例如:
伪元素可以用来实现一些特殊的视觉效果,如添加装饰性的内容或改变元素的某些部分的样式。
伪元素的特异性权重也是0,0,1,0,其中1表示它是一个伪类选择器,但由于它们是伪类的一种,所以通常与伪类一起讨论。
相关文章:
-
> 最新技术资源(建议收藏) > 集算表 (Table Sheet)是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格,通过全新构建的关系型数据管理器结合结构化…
-
-
-
-
-
当前端谈数据时,我们在谈些什么
作为前端,和业务上下游交流数据的时候,经常会出现页面 PV、UV、点击率、转化率等中英混杂不知所云的名词。特别是在存量竞争的当下,数据更是频频出现在高层的目标和...
[阅读全文]
版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。
发表评论