CSS选择器的优先级_html/css_WEB-ITnose

分类:web前端时间: 2016年3月13日

在PHP程序员雷雪松的博客前面的文章已经详细的介绍了CSS选择器和CSS常用的属性和值。下面再讲解一下CSS选择器的优先级。 什么叫CSS选择器优先级呢?简单的讲就是浏览器通过CSS选择器组成的匹配规则判断定义的多条CSS指令优先级,决定最忠元素显示的属性值。那下面就具体的看看关于CSS选择器优先级的规则。

1、通过CSS选择器文件引入的方式。

(外部样式)External style sheet

2、CSSS选择器的优先权,

立即学习“前端免费学习笔记(深入)”;

a. 内联样式表的权值最高1000

b. ID 选择器的权值为100

c. Class 类选择器或者属性选择符或者伪类的权值为10

d. HTML标签选择器或者伪元素选择符的权值为1

e.全局选择符*权值为0

3、!important 规则通常拥有最高级别的规则,同样的CSS选择优先级后面的覆盖前面,自定义的CSS样式优先级大于CSS继承的和浏览器默认CSS的优先级。

4、关于CSS选择器优先级的具体示例。

选择器 计算结果

* { } 0 p { } 1  (HTML标签选择器) li:first-line { } 2  (HTML标签选择器,伪元素选择器) div span { } 2  (2个HTML标签选择器) ul ol+li { } 3  (3个HTML标签选择器) h1 + *[rel=up] { } 11  (HTML标签选择器,属性选择器) dl dt.red { } 13  (一个CLASS类选择器,3个HTML标签选择器) h2.red.level { } 21  (两个CLASS类选择器,HTML标签选择器) style=”” 10,0,0  (行内样式) #page 100  (ID选择器) body #main .left p { } 112  (两个HTML标签选择器,ID选择器, CLASS选择器类)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3117513.html

(0)
上一篇 2025年3月29日 13:42:28
下一篇 2025年3月29日 13:42:35

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论