CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器
一、子级选择器
CSS3 子级选择器是一种选择器，可以用来选择指定元素的直接子元素。它是通过 “>” 符号来实现的。
语法格式如下：
父级元素 > 子级元素 {
/* 属性值 */
}
其中，父级元素是要选择的元素的直接父元素，子级元素是要选择的元素。
下面是一个例子，选择所有 class 为 "list" 的直接子元素 li：
ul.list > li {
/* 属性值 */
}
再来看一个例子，选择所有 class 为 "container" 的直接子元素 div：
选择我
不选择我
选择我
.container > div {
/* 属性值 */
}
在上面的例子中，只有两个 div 元素会被选择，而 p 元素则不会被选择，因为它不是直接的子元素。
除了直接子元素，CSS3 还提供了其他类型的选择器，如后代选择器和相邻兄弟选择器。这些选择器可以更具体地选择元素，具有更广泛的适用性。
下面是一个完整的例子，可以更好地理解子级选择器的用法：
CSS3 子级选择器
- 苹果
- 香蕉
- 橙子
-
桃子
- 红桃
- 黄桃
在上面的例子中，所有 class 为 "list" 的直接子元素 li 都会被选择，并设置为红色。如果需要选择所有 li 元素，则使用后代选择器 ul li。
二、兄弟选择器
CSS3 兄弟选择器是一种选择器，可以用来选择指定元素的同级兄弟元素。它是通过 ~ 或 + 符号来实现的。
- "~" 符号表示选择所有指定元素之后的兄弟元素，包括它自己。
- "+" 符号表示选择紧接在指定元素之后的兄弟元素，不包括它自己。
语法格式如下：
/* 选择所有指定元素之后的兄弟元素 */
元素 ~ 兄弟元素 {
/* 属性值 */
}
/* 选择紧接在指定元素之后的兄弟元素 */
元素 + 兄弟元素 {
/* 属性值 */
}
下面是一个例子，选择紧接在 class 为 "box" 的 div 元素后面的所有 p 元素：
选中
选中
不选中
.box + p {
color: red;
}
在上面的例子中，只有前两个 p 元素会被选择，而最后一个则不会被选择。
再来看一个例子，选择所有 class 为 "item" 的 div 元素之后的所有 h3 元素：
选中
不选中
选中
选中
选中
.item ~ h3 {
color: red;
}
在上面的例子中，除了第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外，其它的 h3 元素都会被选择。
需要注意的是，CSS3 兄弟选择器只能选择同级兄弟元素，不能选择父元素或子元素。若需要选择其他类型的元素，则需要使用其他类型的选择器。
下面是一个完整的例子，可以更好地理解兄弟选择器的用法：
CSS3 兄弟选择器
选中
选中
不选中
选中
不选中
选中
选中
选中
三、结构伪类选择器
CSS3 结构伪类选择器是一种特殊的选择器，可以通过元素在文档中的位置来进行选择。常用的结构伪类选择器有以下几种：
- :first-child 选择器：选择某个元素的第一个子元素。
- :last-child 选择器：选择某个元素的最后一个子元素。
- :nth-child(n) 选择器：选择某个元素的第 n 个子元素，其中 n 可以是数字、关键词或者公式。关键词有 even（偶数）和 odd（奇数）。
- :nth-last-child(n) 选择器：选择某个元素的倒数第 n 个子元素，其中 n 可以是数字、关键词或者公式。关键词有 even（偶数）和 odd（奇数）。
- :only-child 选择器：选择某个元素仅有的子元素。
- :nth-of-type(n) 选择器：选择某个元素的第 n 个同类型子元素，其中 n 可以是数字、关键词或者公式。关键词有 even（偶数）和 odd（奇数）。
- :nth-last-of-type(n) 选择器：选择某个元素的倒数第 n 个同类型子元素，其中 n 可以是数字、关键词或者公式。关键词有 even（偶数）和 odd（奇数）。
- :only-of-type 选择器：选择某个元素仅有的同类型子元素。
语法格式如下：
/* 选择某个元素的第一个子元素 */
元素:first-child {
/* 属性值 */
}
/* 选择某个元素的最后一个子元素 */
元素:last-child {
/* 属性值 */
}
/* 选择某个元素的第 n 个子元素 */
元素:nth-child(n) {
/* 属性值 */
}
/* 选择某个元素的倒数第 n 个子元素 */
元素:nth-last-child(n) {
/* 属性值 */
}
/* 选择某个元素仅有的子元素 */
元素:only-child {
/* 属性值 */
}
/* 选择某个元素的第 n 个同类型子元素 */
元素:nth-of-type(n) {
/* 属性值 */
}
/* 选择某个元素的倒数第 n 个同类型子元素 */
元素:nth-last-of-type(n) {
/* 属性值 */
}
/* 选择某个元素仅有的同类型子元素 */
元素:only-of-type {
/* 属性值 */
}
下面是一个例子，选择 class 为 "container" 的 div 元素的第一个子元素和最后一个子元素：
第一个子元素
不选中
不选中
不选中
最后一个子元素
.container:first-child {
color: red;
}
.container:last-child {
color: blue;
}
在上面的例子中，选择器 .container:first-child 会选择第一个 h3 元素，并设置其颜色为红色，而选择器 .container:last-child 会选择最后一个 h3 元素，并设置其颜色为蓝色。
再来看一个例子，选择 class 为 "list" 的 ul 元素中第 2 个 li 元素和第 4 个 li 元素：
- 不选中
- 选中
- 不选中
- 选中
- 不选中
.list li:nth-child(2),
.list li:nth-child(4) {
color: red;
}
在上面的例子中，选择器 .list li:nth-child(2) 会选择第 2 个 li 元素，并设置其颜色为红色，而选择器 .list li:nth-child(4) 会选择第 4 个 li 元素，并设置其颜色为红色。
需要注意的是，结构伪类选择器通常是基于元素在文档中的位置来进行选择的，因此对于动态生成的元素可能不起作用。
下面是一个完整的例子，可以更好地理解结构伪类选择器的用法：
CSS3 结构伪类选择器
第一个子元素
不选中
不选中
不选中
最后一个子元素
- 不选中
- 选中
- 不选中
- 选中
- 不选中
四、伪元素选择器
CSS3中的伪元素选择器是通过在选择器的末尾加上双冒号(::)来表示的。伪元素选择器用于向某一元素的某一部分添加样式，而不是对整个元素进行样式设置。以下是CSS3中常用的伪元素选择器及其用途：
-
::before伪元素：用于在某个元素的内容前面添加内容。
-
::after伪元素：用于在某个元素的内容后面添加内容。
-
::first-letter伪元素：用于设置某一元素的第一个字母的样式。
-
::first-line伪元素：用于设置某一元素的第一行的样式。
-
::selection伪元素：用于设置用户选中文本的样式。
下面是伪元素选择器的代码演示：
This is a box.
This is a paragraph with a big first letter.
This is a paragraph. This is the first line of the paragraph.
Select this text to see the ::selection pseudo-element in action.
上述代码演示了如何使用伪元素选择器给不同的元素添加样式。我们可以在浏览器中查看效果。
五、属性选择器
CSS3属性选择器是指基于元素的属性和属性值来选择元素的一种选择器。具体来说，就是通过元素的属性和属性值，来指定一个元素或多个元素。以下是属性选择器的详细解析与代码演示：
- [attr] 属性选择器：选择带有指定属性的元素。
例如：选择所有带有 title 属性的元素。
*[title] {
color: red;
}
- [attr=value] 属性选择器：选择带有指定属性和值的元素。
例如：选择所有 title 属性值为 "example" 的元素。
*[title="example"] {
color: red;
}
- [attr~=value] 属性选择器：选择带有属性值中包含指定单词的元素。
例如：选择所有 class 属性值中包含单词 "example" 的元素。
*[class~="example"] {
color: red;
}
- [attr^=value] 属性选择器：选择带有属性值以指定值开头的元素。
例如：选择所有 href 属性以 "https" 开头的元素。
*[href^="https"] {
color: red;
}
- [attr$=value] 属性选择器：选择带有属性值以指定值结尾的元素。
例如：选择所有 href 属性以 ".pdf" 结尾的元素。
*[href$=".pdf"] {
color: red;
}
- [attr*=value] 属性选择器：选择带有属性值中包含指定值的元素。
例如：选择所有 href 属性值中包含 "google" 的元素。
*[href*="google"] {
color: red;
}
代码演示：
/* [attr] 属性选择器 */
*[title] {
color: red;
}
/* [attr=value] 属性选择器 */
*[title="example"] {
color: green;
}
/* [attr~=value] 属性选择器 */
*[class~="example"] {
background-color: yellow;
}
/* [attr^=value] 属性选择器 */
*[href^="https"] {
color: blue;
}
/* [attr$=value] 属性选择器 */
*[href$=".pdf"] {
color: purple;
}
/* [attr*=value] 属性选择器 */
*[href*="google"] {
font-weight: bold;
}
HTML 示例：
This is an example paragraph.
This is an example paragraph.
This is an example paragraph.
This is a link to Google.
This is a link to a PDF file.
This is a link to a Google search for "example".
上述代码执行的效果如下所示：
![属性选择器示例结果](https://