CSS三大特性

CSS三大特性

• 层叠性
• 继承性
• 优先级

继承性

特性：子元素可以继承父元素的某些特性（子承父业）

1. 控制文字的属性都可以被继承，不是控制文字的属性不能被继承；
2. 如果浏览器有默认样式，继承依然存在，但是会优先执行浏览器的默认样式；
3. a标签的颜色属性可以被继承,但是被浏览器默认的样式给覆盖.
4. h系列标签的字体大小被继承,但是被浏览器默认的样式覆盖。
5. 高度不能被继承,但是宽度有类似继承的效果

• 常见的继承属性如下

font-style: italic;
font-weight: 700;
font-size: 30px;
font-family: 宋体;
text-indent: 2em;
text-align: center;
line-height: 300px;

层叠性

1. 相同选择器才会有层叠性
2. 层叠性遵循原则:就近原则.
3. 样式冲突---则层叠(覆盖)
4. 样式不冲突--则叠加(共同作用在一个标签上)

优先级

不同选择器会有不同的优先级, 优先级高的样式会覆盖优先级低的样式.

• 判断公式:

继承<通配符选择器<标签选择器+ 伪元素::after ||::before <类选择器+伪类 :hover<id选择器<行内样式<!important

各个选择器的权重:

标签选择器 0 0 0 1 简单记忆 1

类选择器 0 0 1 0 简单记忆10

id选择器 0 1 0 0 简单记忆100

行内样式 1 0 0 0 简单记忆1000

1. !important如果不是继承,权重最高 天下第一
2. 复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002
3. 不会有进位的情况，比如 0,0,0, 10
4. 优先级相同,会执行层叠性,写在最后面的会生效