CSS三大特性:层叠性、继承性、优先级。
复合选择器会有权重叠加的问题。
层叠性
相同选择器设置相同样式时,后者会覆盖前者的样式。(后来居上)
不冲突的样式,不会覆盖。
目的:解决样式冲突。
继承性
子标签会基础父标签的部分样式。以下样式可被继承。
text- :
line- :
font- :
color:
盒模型相关内容不会被继承。(宽高内外边距等,存疑,待进一步学习)
目的:简化代码
优先级
选择器相同,则后来居上。
选择器不同,则根据权重执行。
!important /* ∞ */ 行内样式 /* 1,0,0,0 */ id选择器 /* 0,1,0,0 */ 类选择器、伪类选择器 /* 0,0,1,0 */ 元素选择器 /* 0,0,0,1 */ 继承、* /* 0,0,0,0 */
注:行高的继承:
font: 12px/1.5 Microsoft YaHei
行高被集成式,是继承了1.5,再以子元素的字体大小重新计算。
权重叠加
复合选择器会有权重叠加的问题。
权重叠加一定不会进位。
ul li { } /* 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */ div ul li /* → 0,0,0,3 */ .nav ul li /* → 0,0,1,2 */ a:hover /* → 0,0,1,1 */ .nav a /* → 0,0,1,1 */