day16 css3层级选择器 属性选择器 结构伪类 目标伪类 动态伪类

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 元素选中的高亮状态,一般情况只改背景色和字体颜色