继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：
|
1
2
3
4
5
6
7
8
9
|
<html><br><head><style>p{border:1px solid red}</style></head><body><p>123<span>123</span>123</p></body></html> |
如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
在上面的例子中，span标签没有用处，p标签起到了设置了边框为1像素，实心边框线。
特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？
想要理解这个概念，就要先理解权值这个概念。
在百度百科中对于权值的概念是这样的：在数学领域，权值指加权平均数中的每个数的频数，也称为权数或权重。计算机领域中（数据结构）权值就是定义的路径上面的值。可以这样理解为结点间的距离。通常指字符对应的二进制编码出现的概率。
|
1
2
3
4
5
6
7
8
9
10
11
|
<html><head><style>p{color:red}.first{color:green}</style></head><body><p class="first">123</p></body></html> |
在CSS中，权值是这样的：标签的权值为1，类选择符的权值10，ID选择符的权值为100。
层叠
如果在html文件中对于同一个元素可以有多个CSS样式存在并且这多个CSS样式具有相同权值怎么办？
这就是层叠，如下列代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
<html><head><style>p{color:red}p{color:green}</style></head><body><p>123</p></body></html> |
最后p中的文本会设置成green，层叠很好理解。
选择器的优先级：
| 嵌入 | id | class | 元素 | |
|---|---|---|---|---|
| a | b | c | d | |
| style | 1 | 0 | 0 | 0 |
| id | 0 | 1 | 0 | 0 |
| class，属性，伪类 | 0 | 0 | 1 | 0 |
| 元素，伪元素 | 0 | 0 | 0 | 1 |
| 通配符 | 0 | 0 | 0 | 0 |
| ！important | 最高 | 最高 | 最高 | 最高 |
重要性
当我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时我们可以使用！important来解决
如下代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
<html><head><style>p{color:red!important;}p{color:green}</style></head><body><p>123</p></body></html> |
这时p的颜色为红色。
原文：https://www.cnblogs.com/sunhaobin/p/12045475.html