CSS样式优先级
CSS优先级
当样式表比较复杂时,很容易出现多个样式对作用于一个标签的情况,这时就需要注意CSS
优先级来决定哪些样式会被作用于该标签,哪些会被覆盖。
选择器的优先级
对于标签自有的属性,选择器的优先级规则为
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
当如下几个选择器作用于同一个标签时本例显示的颜色为red
,可以在浏览器的Elements
选中相应元素,在Styles
查看样式的覆盖情况并调试。
<div id="i1" class="c1">T1</div>
<style type="text/css">
#i1 {
color: red;
}
.c1 {
color: blue;
}
:nth-child(1){
color: green;
}
div {
color: grey;
}
</style>
选择符的优先级
选择符是由基本选择器组成,基本分为
后代选择符: #i1 .c1 .c2
子选择符:#i1 > .c1 > .c2
相邻选择符:.c1 + .c2
计算选择符中 ID
选择器的个数a
,计算选择符中类选择器、属性选择器以及伪类选择器的个数之和b
,计算选择符中标签选择器和伪元素选择器的个数之和c
。按a
、b
、c
的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中a
、b
、c
都相等,则按照"就近原则"来判断,此外,拥有!important
的属性具有最高的优先级。
<div id="i2" class="c2">
<div>T2</div>
</div>
<style type="text/css">
#i2 div {
color: red;
}
.c2 > div {
color: green;
}
div > div {
color: blue;
}
:nth-child(1){
color: black;
}
div {
color: grey;
}
</style>
第一个选择符 a:1 b:0 c:1
第二个选择符 a:0 b:1 c:1
第三个选择符 a:0 b:0 c:2
第四个选择符 a:0 b:1 c:0
第五个选择符 a:0 b:0 c:1
优先级顺序依次为: 1 2 4 3 5
引自 https://www.runoob.com/w3cnote/css-style-priority.html 在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 > 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。
多重样式优先级
外部样式表和内部样式表的优先级由其引入顺序有关,一般认为内部样式优先级大于外部样式,也可以认为其相等,因为如果外部样式放在内部样式的后面引入,则外部样式将覆盖内部样式。
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
继承样式
一般来说对于文字样式的设置都会具有继承性,例如font-family
、font-size
、font-weight
、color
等等,当需要继承样式时,最近的祖先样式比其他祖先样式优先级高。
<div style="color: red;">
<div style="color: blue;">
<div >T3</div> <!-- 显示蓝色 -->
</div>
</div>
代码
<!DOCTYPE html>
<html>
<head>
<title>CSS样式优先级</title>
</head>
<style type="text/css">
#i1 {
color: red;
}
.c1 {
color: blue;
}
:nth-child(1){
color: green;
}
div {
color: grey;
}
#i2 div {
color: red;
}
.c2 > div {
color: green;
}
div > div {
color: blue;
}
</style>
<body>
<div id="i1" class="c1">T1</div>
<br>
<div id="i2" class="c2">
<div>T2</div>
</div>
<br>
<div style="color: red;">
<div style="color: blue;">
<div style="color: inherit;">T3</div> <!-- 显示蓝色 -->
</div>
</div>
</body>
</html>
- sed的粉丝
- 在Managed Code通过Google Gmail发送邮件以及如何通过Outlook配置Gmail
- 平方根的C语言实现(一) —— 浮点数的存储
- 用awk写递归
- bc计算A股上市新股依次涨停股价
- ASP.NET Core应用的错误处理[1]:三种呈现错误页面的方式
- python访问http的GET/POST
- 用openssl库RSA加密解密
- Kobject浅析
- ASP.NET Core应用的错误处理[2]:DeveloperExceptionPageMiddleware中间件如何呈现“开发者异常页面”
- RSA简介(二)——模幂算法
- 为虚拟机vCPU绑定物理CPU
- RSA简介(三)——寻找质数
- RSA简介(四)——求逆算法
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Java 13 新特性
- 杭电 1789(贪心思维练习)
- 利用反转函数确定回文串
- Codeforces Round #618 (Div. 2)
- Educational Codeforces Round 82 (Rated for Div. 2)
- [C# 开发技巧]如何防止程序多次运行
- 问题 1117: K-进制数
- Java 11 新垃圾回收器 ZGC
- Red and Black(DFS 深搜练习)
- Codeforces Round #619 (Div. 2)
- 问题 1255: [蓝桥杯][算法提高]能量项链
- C# 开发技巧]如何防止程序多次运行 线程 进程
- 问题 1433: [蓝桥杯][2013年第四届真题]危险系数
- C# dev GridControl绑定数据不能显示
- Codeforces Round #621 (Div. 1 + Div. 2)(无比自闭的一夜)