结构伪类选择器
根据元素在HTML中的结构关系查找元素
优势:减少对HTML中类的依赖
场景:常用于查找某父级选择器中的子元素
- 选择器
选择器 | 说明 |
---|---|
nth-child(n){} | 匹配父元素的第n个元素 |
nth-last-child(n){} | 匹配父元素的倒数第n个元素 |
n的注意点
功能 | 公式 |
---|---|
偶数 | 2n、even |
奇数 | 2n+1、2n-1 |
前五个 | -n+5 |
从第五个往后 | n+5 |
伪元素
一般页面中的非主体内容可以使用伪元素
区别:
元素:HTML设置的标签
伪元素:由CSS模拟出的标签效果
种类
伪元素 | 作用 |
---|---|
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
注意点:
必须设置content属性才能生效
伪元素默认时行内元素
标准流
默认采用的一套排版规则 规定了应该以何种方式排列元素
浮动
作用:网页布局
代码:
float
- 特点
- 浮动元素会脱离标准流 不占位置
- 比标准流高半个级别 可以覆盖元素
- 浮动找浮动 下一个浮动会在上一浮动后面
- 浮动有特殊的显示效果
一行可以显示多个
可以设置宽高
CSS的书写顺序
1.浮动 / display
2.盒子模型:margin border padding
3.文字样式