第4章CSS3中其他类型的选择器《HTML5+CSS3网页设计与制作（第2版）》
学习目标/Target掌握伪元素选择器的用法，能够使用伪元素选择器控制标签的样式掌握关系选择器的用法，能够使用关系选择器选择父标签中嵌套的子标签掌握结构化伪类选择器的用法，能够使用不同功能的结构化伪类选择器精确选择对应的标签熟悉属性选择器的用法，能够阐明不同属性选择器的特点
章节概述/Summary选择器在CSS3中是比较重要的内容。第3章已经介绍了CSS基础选择器和复合选择器，它们基本能够满足开发者的设计需求。然而，在CSS3中还有一些其他类型的选择器，它们可以提高开发者编写和修改CSS样式的效率。本章将详细介绍CSS中其他类型的选择器。
目录/Contents010203属性选择器关系选择器结构化伪类选择器04伪元素选择器05阶段案例——制作列车时刻表
属性选择器4.1
4.1属性选择器本节将介绍常用的3种属性选择器。属性选择器可以根据标签的属性及属性值来选择对应标签。E[attribute^=value]选择器E[attribute$=value]选择器E[attribute*=value]选择器
4.1.1E[attribute^=value]选择器E[attribute^=value]选择器用于选择标签名称为E（代指标签名称）、属性为attribute（代指属性名称）、属性值以value（代指属性值字符串）开始的标签。概念例如：div[id^=section]用于匹配包含id属性，且id属性值是以section开始的div标签。
4.1.2E[attribute$=value]选择器E[attribute$=value]选择器用于选择属性值以value（代指属性值字符串）结尾的标签。概念例如：div[id$=section]表示匹配包含id属性，且id属性值以section结尾的div标签。
4.1.3E[attribute*=value]选择器E[attribute*=value]选择器用于选取标签名称为E（代指标签名称）、属性为attribute（代指属性名称）、属性值包含value（代指属性值字符串）的标签。概念例如：div[id*=section]表示匹配包含id属性，且id属性值包含section字符串的div标签。
关系选择器4.2
4.2关系选择器在CSS3中，使用关系选择器可以选择指定标签的特定子标签或兄弟标签。通过这种方式，可以更精细地控制网页中标签的样式。关系选择器由多个基础选择器组成，主要包括子代关系选择器和兄弟关系选择器。本节将详细讲解这两种关系选择器。
4.2.1子代关系选择器子代关系择器由多个基础选择器组成，各基础选择器之间使用“”连接，主要用来选择某个父级标签的子标签。概念h1strong例如：想要选择h1标签的子标签strong，可以使用子代关系选择器h1strong。
4.2.2兄弟关系选择器兄弟关系选择器用于选择位于同一个父标签中、指定标签后，且和指定标签具有并列关系的子标签。概念邻接兄弟选择器通用兄弟选择器
4.2.2兄弟关系选择器兄弟关系选择器用于选择位于同一个父标签中、指定标签后，且和指定标签具有并列关系的子标签。概念邻接兄弟选择器该选择器使用加号“+”来连接前后两个基础选择器。其中“+”前面的基础选择器用于选择指定标签，“+”后面的基础选择器用于选择紧挨着指定标签的标签。指定标签和被选择的标签的父标签相同，其他标签不会被选择。
4.2.2兄弟关系选择器兄弟关系选择器用于选择位于同一个父标签中、指定标签后，且和指定标签具有并列关系的子标签。概念通用兄弟选择器通用兄弟选择器使用“~”来连接前后两个基础选择器。其中“~”前面的基础选择器用于选择指定标签，“~”后面的基础选择器用于选择指定标签之后同一类型的子标签，其他位置和不同类型的子标签不会被选择。
结构化伪类选择器4.3
4.3结构化伪类选择器结构化伪类选择器能根据HTML文档结构选择对应的标签，即使在没有添加class属性或id属性的情况下，也能使用结构化伪类选择器选择结构复杂的标签。CSS3中提供了多种结构化伪类选择器，它们以“:”作为前缀，包括:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器等。本节将详细介绍这些常用的结构化伪类选择器。
4.3.1:root选择器:root选择器用于匹配文档根标签，即html标签。使用:root选择器定义的样式适用于页面中的所有标签。
4.3.2:not选择器:not选择器用于选择除特