5.2 CSS3新增选择器-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元5 CSS3新特性 5.2 CSS3新增选择器 PART 01 CSS3新增属性选择器 主要内容 CONTENTS PART 03 CSS3UI伪类选择器 PART 02 CSS3结构伪类选择器 2 CSS3新增属性选择器 属性选择器就是根据元素的属性值的情况来匹配元素。 选择具有attr属性的E元素，来应用rule指定的样式。 E [attr] {rule} 选择具有attr属性并且值等于value的E元素，来应用rule指定的样式 E [attr=value] {rule} CSS2常用属性选择器 CSS3新增属性选择器 选择具有attr属性且属性值以value开头的E元素，来应用rule指定的样式。 E [attr^=value] {rule} 选择具有attr属性且属性值以value结尾的E元素，来应用rule指定的样式。 E [attr$=value] {rule} 选择具有attr属性且属性值任意位置包含value的E元素，来应用rule指定的样式。 E [attr*=value] {rule} CSS3中新增属性选择器 【案例5.2.1】使用CSS3新增属性选择器 CSS3结构伪类选择器 　结构伪类选择器，在文档结构树(DOM)上，通过元素节点间的相互关系（父子、兄弟等）来动态查找元素，从而减少文档内使用class属性、id属性的定义，使得文档更加简洁。 匹配不含子节点（包括文本）的E元素。 E : empty 匹配E元素所在的文档的根元素，一般是html元素。 E : root CSS3结构伪类选择器 child系列 E:nth-child(n) E:first-child E:nth-last-child(n) E:last-child E:only-child 参数n可以是数字（1、2、3…）、关键字（odd、even）或表达式（2n+1、-n+5…），参数索引的起始值为1而非0。 CSS3结构伪类选择器 type系列 E:nth-of-type(n) E:first-of-type E:only-of-type E:nth-last-of-type(n) E:last-of-type child系列和type系列区别： type系列在同类型子元素中进行排序，即所有E元素被分离出来单独排序，非E子元素不参与排序。 【案例5.2.2】使用CSS3结构伪类选择器 CSS3UI伪类选择器 选择器 说明 E:enabled 匹配用户界面上处于可用状态的元素E。 E:disabled 匹配用户界面上处于禁用状态的元素E。 E:checked 匹配用户界面上处于选中状态的元素E。 注：仅适用于单选按钮radio或复选框checkbox。 CSS3UI伪类选择器 【案例5.2.3】使用CSS3的UI伪类选择器 感谢观看 $