# CSS的继承性、层叠性、权重
*CSS像艺术家一样优雅，像工程师一样严谨*
### 继承性
CSS样式具有继承性，所谓的继承性，就是给某些元素设置样式时，后代元素也会自动继承父类的样式。这叫CSS的继承性。比如 `color` 属性设置字体颜色，后代自动继承。CSS的继承特性，一定程度上简化了代码的操作，至少方便了我这类懒癌患者。
```html
test
```
这里，在div中设置color，他的后代元素li中的文字，都被设置为了红色，这就是继承性。
注意，并不是所有的CSS属性都会继承，常见的继承属性有：
color、 text- **\_ 、line-\_ *****、font-*** 。
拥有继承的通常是关于文字样式的， 所有关于盒子的、定位的、布局的属性都不能继承。
### 层叠性和权重
层叠性：就是css处理冲突的能力。
当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。
可以这样理解权重：这个选择器对于这个元素的重要性。
#### 权重的计算
权重的计算也很简单，当选择器选上了某个元素的时候，就会统计权重，计算的格式为：
```
id数量，类的数量，标签的数量
```
如选择器直接作用到p标签：
```css
#box .imp p{
}
```
的权重为： `1，1，1`
```
div.imp div.imp2 div.imp3 p{
}
```
的权重为： `0，3，4`
#### 那么如何比较权重的大小？
将权重看作三位数，比较即可，但是注意，权重不可以进位！！！（理论上255个标签可以进一位）
比如 权重 `1，0，0` > `0,100,100`
#### 如果两个选择器权重相同会如何？
当选择器的权重相同时，会选择声明在后面的选择器，类似于变量赋值。
```html
test
我最帅！！
```
此时颜色显示为蓝色，因为两个选择器权重相同，蓝色位置靠后。
#### 继承的属性的权重？
前面的案例选择器都直接作用到了p标签，如果效果不是由选择器直接作用的，而是由其他选器继承而来的属性，那么这个属性对于这个元素的权重就为0。
如果两个选择器的权重都为0，就采取继承特性。（即网上所说的就近原则，感觉用继承解释比较合理）
个人认为这个问题没有什么必要去进行处理，如果选择器的权重是0，那么，选择器就不是作用在这个标签上的，也就和这个标签没有关系。这个标签获得的选择器中的某些属性，都是继承来的。权重为0可能是底层的计算。但是这样理解未免有些绕圈圈了。
```
test
```
#### important 标记
```html
test
我最帅！！
```
此时会显示红色，因为 `!important` 标记将这个属性的权重最大化了。
### 总结
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://yangsx95.gitbook.io/notes/front-end/css/css-de-ji-cheng-xing-ceng-die-xing-quan-zhong.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.