学习笔记，仅供参考，有错必纠
参考自：CSS中文文档
CSS
CSS层叠性
所谓层叠性是指多种CSS样式叠加的处理方案。
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style>
.box {
background-color: red;
color: yellow;
height: 200px;
width: 200px;
}
.wrap {
background-color: green;
}
</style>
</head>
<body>
<div class="box wrap">
俺是div标签
</div>
</body>
</html>
页面：
CSS继承性
所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。
- 图示
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style>
.box {
color: red;
}
</style>
</head>
<body>
<div class="box">
我是div
<p>
我是段落
</p>
</div>
</body>
</html>
页面：
- 举个例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style>
.box {
color: red;
}
body {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
我是div
<p>
我是段落
</p>
</div>
</body>
</html>
页面：
- 注意事项
恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以，如字体、字号、颜色、行距等样式，我们可以在body标签中统一设置，然后通过继承影响文档中所有文本。
所有与文字相关的都可以继承，比如：color、text-系列、font-系列、line-系列、cursor等；
并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素宽高属性。
CSS的优先级(特殊性)
内联样式优先级最高；
ID选择器的优先级，仅次于内联样式；
类选择器优先级低于ID选择器；
标签选择器低于类选择器。
- 优先级图示
- 举个例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS特殊性</title>
<style>
#txt-wrap {
background-color: red;
}
.box {
color: red;
background-color: yellow;
}
/*层叠性是指： 在样式的优先级相同的情况下才会考虑的*/
</style>
</head>
<body>
<div class="box" id="txt-wrap" style="color: blue;">
我是div的文字
</div>
</body>
</html>
页面：
- 举个例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器案例</title>
<style>
body {
color: red; /*继承的样式 > 浏览器默认的样式 */
}
* {
color: blue; /*通配符选择器的样式 > 继承的样式*/
}
h1 {
color: green; /*标签选择器的样式 > 通配符选择器的样式*/
}
.title-demo {
color: purple; /*类选择器的样式 > 标签选择器的样式的优先级*/
}
#id-title {
color: yellow; /*id选择器的优先级 > 类选择器的样式*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside-dt" id="title-txt">
<h1 class="title-demo" id="id-title" style="color: pink;">我是一个标题</h1>
</div>
<div class="aside-dd">
<p>我是一个段落</p>
</div>
</div>
</div>
</body>
</html>
页面：
- 结论
- 继承的样式的优先级 > 浏览器默认样式的优先级
- 通配符选择器样式的优先级 > 继承的样式的优先级
- 标签选择器的样式的优先级 > 通配符选择器的样式的优先级
- 类选择器的样式的优先级 > 标签选择器的样式的优先级
- id选择器的优先级 > 类选择器的样式的优先级
- 行内样式的优先级 > id选择器的优先级
复合选择器的优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
现在我有3个复合选择器，它们分别是：
选择器A：ID选择器 类选择器 ID选择器
选择器B：类选择器 类选择器 标签选择器
选择器C：标签选择器 标签选择器 类选择器 类选择器
请问它们的如何排它们的优先级？
我们都知道：
ID选择器优先级 > 类选择器优先级 > 标签选择器优先级
这里，我们将这3个复合选择器中各个选择器的数量分别计算出来，并绘制成表格，进行优先级比较：
| 复合选择器名 | ID选择器 | 类选择器 | 标签选择器 |
|---|---|---|---|
| 选择器A | 2 | 1 | 0 |
| 选择器B | 0 | 2 | 1 |
| 选择器C | 0 | 2 | 2 |
可以看到，选择器A的ID选择器数量为2，在3个选择器中数量最多，所以它的优先级最高；在剩下的两个选择器中，选择器B和选择器C的类选择器数量都一样多，所以我们再对他们的标签选择器数量进行比较；我们发现，选择器C的标签选择器数量大于选择器选择器B，所以选择器C的优先级大于选择器B的优先级。
也就是说，优先级先后顺序为：
选择器A > 选择器C > 选择器B
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器案例</title>
<style>
.aside .aside-dt h1 {
background-color: silver;
}
.aside #title-txt #id-title {
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside-dt" id="title-txt">
<h1 class="title-demo" id="id-title" style="color: pink;">我是一个标题</h1>
</div>
<div class="aside-dd">
<p>我是一个段落</p>
</div>
</div>
</div>
</body>
</html>
页面：
关于优先级权重的注意事项
继承样式的权重为0，即在嵌套结构中，不管父元素样式的权重多大，当被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器案例</title>
<style>
.aside .aside-dt h1 {
background-color: silver;
}
.aside #title-txt {
/*
虽然.aside .aside-dt h1选择器的优先级低于.aside #title-txt选择器的优先级，
但是div标签为h1标签的父标签，h1标签的样式会覆盖掉div标签的样式
所以在这里复合选择器的优先级没有起到作用
*/
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside-dt" id="title-txt">
<h1 class="title-demo" id="id-title" style="color: pink;">我是一个标题</h1>
</div>
<div class="aside-dd">
<p>我是一个段落</p>
</div>
</div>
</div>
</body>
</html>
页面：
