1、CSS的层叠性
- 当样式发生冲突时, 权重相同的选择器,后面的样式会把前面的样式覆盖掉(层叠掉),
就近原则 - 背景颜色
background-color不生效时，考虑是不是background复合属性里的backgroud-color:transparent把前面的背景颜色给层叠掉了 - 行高
line-height不生效时，考虑是不是font复合属性 中有默认的行高，把前面的行高给层叠掉了
2、CSS的继承性
可以继承的属性
- 字体系列：
font、font-family、font-weight、font-size、font-style - 文本系列属性：
- 内联元素：
color、line-height、word-spacing、letter-spacing、text-transform - 块级元素：
text-indent、text-align、
- 内联元素：
- 元素可见性：
visibility - 表格布局属性：
border-collapse、border-spacing、empty-cells、table-layout、caption-side - 列表布局属性：
list-style
不能继承的属性
- display：规定元素应改生成的框的类型
- 文本属性：
vertical-align、text-decoration - 盒子模型的属性：
width、height、margin、border、padding - 背景属性：
background、background-color、background-image - 定位属性：
float、clear、left、top、right、bottom、min-height、min-width、max-height、max-width、overflow、clip text-decoration比较特殊,可以继承,但检查时显示灰色
继承的特殊情况
- 标题标签
h1-h6不会继承父元素的文字大小 a标签不会继承父元素的文字颜色
3、CSS的优先级
CSS权重选择器优先级计算表格：
| 选择器 | 选择器权重 |
|---|---|
| 继承或* | 0, 0, 0, 0 |
| 元素选择器 | 0, 0, 0, 1 |
| 类选择器，伪类选择器 | 0, 0, 1, 0 |
| ID选择器 | 0, 1, 0, 0 |
| 行内样式 style="" | 1, 0, 0, 0 |
!importtent | ∞ 无穷大 |
优先级注意点
- 权重是由四组数字组成，但是
不会进位 - 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
- 等级判断从左向右，如果某一位数值相同，则判断下一位数字
- 简单记忆法：通配符和继承的权重为
0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式为1000，！importanrt 为无穷大 - 继承的权重是
0，如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0
权重会叠加
如果是符合选择器，则会有权重叠加，需要计算权重
---div ul li 0,0,0,3
---.nav ul li 0,0,1,2
--- a:hover 0,0,1,1
--- #box p 0,1,0,1
**！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性**
