共计 1034 个字符，预计需要花费 3 分钟才能阅读完成。
1. 弹性盒子元素的属性
1）order: 排序。值越大，越靠后，能够为正数。
2) flex-grow: 调配残余空间。默认状况下值为 0。元素有多宽，就占多大空间，当给某一个元素设置 flex-grow: 1，该元素会占满整个残余空间，如果每个人都设置了，代表整个空间的调配的总份数。
3）flex-basis: 子元素的宽
4）flex-shrink: 压缩。默认值 1 示意压缩；0 不压缩。
利用：弹性盒设置自行超出父元素显示滚动条。
给每个子项设置 flex-shirnk:0; 不压缩，父元素设置 overflow:auto; 溢出显示滚动条。
5）复合写法：
- flex: flex-grow(0) flex-shrink(1) flex-basis(auto);
- flex:1; 相似于 flex-grow:1; 占满整个残余空间。
2. 层级选择器
1) 后辈选择器 选择器 选择器{}
2) 子代选择器 选择器> 选择器 只能抉择孩子，不能抉择到孙子及之后，然而要留神继承
3) 相邻的兄弟 选择器+ 选择器 只能抉择到前面的相邻的一个兄弟
4) 相邻的兄弟们 选择器~ 选择器 只能抉择到前面的兄弟们
3. 属性选择器
- 能够抉择自定义的属性
1) 标签名[属性名] 依据属性名抉择
2) 标签名[属性名 =” 属性值 ”] 属性名和属性值要匹配
3) 标签名[属性名 ^=” 值 ”] 以该值结尾
4) 标签名[属性名 $=” 值 ”] 以该值结尾
5) 标签名[属性名 *=” 值 ”] 蕴含该值
4. 结构性伪类
child 系列
- 父元素 子元素:first-child{} 父元素中的第一个孩子 这个孩子必须是老大
- 父元素 子元素:last-child{} 父元素中的最初一个孩子 这个孩子必须是老小
- 父元素 子元素:nth-child(n) 父元素中的第几个孩子, 第几个必须和孩子的第几个位数对上 n 是自然数, 也能够是 odd 奇数 even 偶数 也能够是表达式 比方 4n 4 的倍数
type 系列
- 父元素 子元素:first-of-type{} 很多该子元素中的第一个
- 父元素 子元素:last-of-type{} 很多该子元素中的最初一个
- 父元素 子元素:nth-of-type(n) 很多该子元素中的第几个, n 是自然数, 能够是 odd 奇数 even 偶数 , 也能够表达式 比方 2n
5. 指标伪类
- 须要联合锚点应用
- 指标元素:target{} 设置跳转到该板块之后呈现的款式
6. 动静伪类
- :enabled 表单可编辑状态
- :disabled 表单不可编辑的状态
- :checked 表单选中的状态
- :focus 表单获取焦点的状态
- ::selection 元素选中的高亮状态, 个别状况只改背景色和字体色彩
正文完