1、层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖另一个冲突的样式
原则:
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个。
不冲突,不会层叠
长江后浪推前浪,后面的样式会覆盖前面的样式
2、继承性
子标签会继承父标签的某些样式(text-,font-,line-,color)
3、优先级
选择器相同,则执行层叠性
选择器不同,则根据选择器权重执行,权重大,就选择
选择器 权重
集成(通配符) 0
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000
!important 无穷大
4、权重
继承的没有权重,如果该元素没有被直接选中,不管父元素权重多高,子元素都没有权重(可以理解为负数)
权重叠加:复合选择器会有权重叠加
链接有默认样式,需要选中a才能改变
5、伪元素(用“::”)
::before
在当前元素前面插入一些元素
::after
在当前元素后面插入一些元素
div::before/after {content: ;....}
特点:属于行内元素
::first-line 在元素的第一行文字使用css样式
::selection 当鼠标选择某些内容的时候出现的样式
6、基线对齐(给图片的)
vertical-align: 属性值;
属性值 效果
baseline 默认(图片顶对齐,文字底对齐)
top
bottom
middle
图片和文字同时存在使用对齐语法