CSS样式表的继承性和层叠性
本文重点
- CSS的继承性
- CSS的层叠性
- 计算权重
- 权重问题大总结
- CSS样式表的冲突的总结
- 权重问题深入
- 同一个标签，携带了多个类名
- !important标记
CSS的继承性
我们来看下面这样的代码，引入继承性：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>我是什么颜色？</p>
</div>
</body>
</html>上方代码中，我们给div设置了color: red，但是却没有给p标签设置color。此时p标签的颜色会继承父亲div的颜色。
继承性：给自己设置的样式，后代都继承。
继承性是从自己开始，直到最小的元素。
但是继承性不是所有的属性都能继承：
- 以
color/font-/text-/line-开头的属性可以继承 - 背景相关的属性，
background-开头的，不能继承 - 布局相关的属性，
width/height/margin/padding/border，不能继承
CSS的层叠性
层叠性：就是CSS处理冲突的能力。
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
- ID选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
例如：
css
#box1 {
color: red;
}
div.box2 {
color: green;
}
.box3 {
color: blue;
}上面的选择器，优先级从高到低依次是：#box1 > div.box2 > .box3。
计算权重
为了更精确地计算权重，我们可以使用一种表示方法：(a, b, c)，其中：
- a 表示 ID 选择器的个数
- b 表示 类选择器、属性选择器、伪类选择器的个数
- c 表示 标签选择器、伪元素选择器的个数
例如：
#box1：权重为 (1, 0, 0)div.box2：权重为 (0, 1, 1).box3：权重为 (0, 1, 0)
比较规则：从左到右依次比较，如果相等则比较下一位，如果不相等则权重高的优先。
权重问题大总结
- 如果选择器都选中了某个元素，那么要按照权重来处理
- 如果权重一样，那么按照后来者居上的原则，即选择器出现的顺序
- 继承的权重为0，即使父元素使用了!important，子元素继承的权重也是0
CSS样式表的冲突的总结
- 对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
- 对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
- 外部样式表的ID选择器 > 内嵌样式表的标签选择器
权重问题深入
同一个标签，携带了多个类名
如果同一个标签使用了多个类，这些类都有同一个属性，那么会根据这些类在样式表中的顺序来决定，后面的会覆盖前面的。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
color: red;
}
.box2 {
color: green;
}
.box3 {
color: blue;
}
</style>
</head>
<body>
<div class="box1 box2 box3">我是什么颜色？</div>
</body>
</html>上面的例子中，div最终的颜色是blue，因为.box3在样式表中排在最后。
!important标记
如果我们在一个属性值后面加上!important，那么这个属性就会有最高的权重。
css
.box1 {
color: red !important;
}即使其他选择器的权重再高，也不会覆盖加了!important的属性。但是，如果有多个!important，那么还是按照选择器的权重来比较。
实际应用示例
示例1：基本继承
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性示例</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
<h1>这是标题</h1>
<p>这是段落文本，会继承body的字体、颜色和行高。</p>
</div>
</body>
</html>在上面的例子中，我们只给body设置了样式，但是h1和p标签都会继承这些样式。
示例2：权重计算
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重计算示例</title>
<style type="text/css">
/* 权重：(0, 0, 1) */
p {
color: blue;
}
/* 权重：(0, 1, 0) */
.text {
color: green;
}
/* 权重：(1, 0, 0) */
#content {
color: red;
}
/* 权重：(0, 1, 1) */
p.special {
color: purple;
}
</style>
</head>
<body>
<p>普通段落，颜色为蓝色</p>
<p class="text">带有class的段落，颜色为绿色</p>
<p id="content">带有id的段落，颜色为红色</p>
<p class="text special">带有多个class的段落，颜色为紫色</p>
</body>
</html>在上面的例子中，我们可以清楚地看到不同选择器的权重计算。
示例3：!important的使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>!important示例</title>
<style type="text/css">
/* 权重：(1, 0, 0) */
#content {
color: red;
}
/* 权重：(0, 1, 0)，但是使用了!important */
.text {
color: green !important;
}
</style>
</head>
<body>
<p id="content" class="text">这个段落的颜色是什么？</p>
</body>
</html>在上面的例子中，尽管ID选择器的权重高于类选择器，但是由于类选择器使用了!important，所以段落的颜色是绿色。
总结
CSS的继承性和层叠性是CSS的两个重要特性：
- 继承性：子元素会继承父元素的某些样式属性，主要是文本相关的属性。
- 层叠性：当多个选择器选中同一个元素时，CSS会根据选择器的权重来决定应用哪个样式。
理解这两个特性对于编写高效、可维护的CSS代码至关重要。在实际开发中，我们应该尽量避免过度使用高权重的选择器和!important，以保持CSS的可维护性。