选择器/盒模型/常用单位
1. 伪类选择器
根据元素的位置或状态来匹配子元素
1.1 结构伪类
与上下文选择器很相似
:nth-child():在括号内定义:first-child:第一个元素:last-child:最后一个:nth-last-child()：倒数
代码演示：
获取第一个元素：.list>.item:nth-child(1){background-color: violet;}/* 括号内填写多少数字就获取对应的元素 */
获取最后一个元素：.list > .item:first-child {background-color: violet-;}
获取倒数第三个元素：.list > .item:last-child {background-color: violet-;}
.list>.item:nth-last-child(3){background-color: violet;}
1.2 状态伪类
链接,表单
:hover: 鼠标悬停:enabled: 有效控件:disabled: 禁用控件:checked: 选中控件:required: 必选控件:focus: 焦点控件:not(): 过滤掉某些元素:empty(): 空
更多查询 MDN
2. 选择器权重
- 原子选择器: tag,class,id
- 原子选择器权重: tag(1),class(10),id(100)
可简单理解为: 标签是个位, class 是十位, id 是百位
3. 盒模型
3.1 一切皆”盒子”
- 盒子是页面中可见的”矩形区域”
- php.cn:
<html>,{outline:1px solid red}
3.2 五大属性
width: 宽height: 高padding: 内边距border: 边框margin: 外边距
3.3 border
- 可见属性
- 可设置
width,style,color
3.4 padding,margin
- 不可见属性
- 仅可设置:
width - 大多数内置元素都有默认
padding/margin - 建议全部重置为 0,以方便自定义布局
3.5 width,height
- 默认不包含
padding,border
3.6 box-sizing
box-sizing: 设置盒模型计算边界content-box: 默认值,仅包括内容区border-box: 推荐值,宽高扩展到可视边框
3.7 通用初始化
```css
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}