一、子级选择器
CSS3 子级选择器是一种选择器，可以用来选择指定元素的直接子元素。它是通过 “>” 符号来实现的。
语法格式如下：
父级元素 > 子级元素 {
/* 属性值 */
}
其中，父级元素是要选择的元素的直接父元素，子级元素是要选择的元素。
下面是一个例子，选择所有 class 为 "list" 的直接子元素 li：
ul.list > li {
/* 属性值 */
}
再来看一个例子，选择所有 class 为 "container" 的直接子元素 div：
<div class="container">
<div>选择我</div>
<p>不选择我</p>
<div>选择我</div>
</div>
.container > div {
/* 属性值 */
}
在上面的例子中，只有两个 div 元素会被选择，而 p 元素则不会被选择，因为它不是直接的子元素。
除了直接子元素，CSS3 还提供了其他类型的选择器，如后代选择器和相邻兄弟选择器。这些选择器可以更具体地选择元素，具有更广泛的适用性。
下面是一个完整的例子，可以更好地理解子级选择器的用法：
<!DOCTYPE html>
<html>
<head>
<title>CSS3 子级选择器</title>
<style type="text/css">
ul > li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>
桃子
<ul>
<li>红桃</li>
<li>黄桃</li>
</ul>
</li>
</ul>
</body>
</html>
在上面的例子中，所有 class 为 "list" 的直接子元素 li 都会被选择，并设置为红色。如果需要选择所有 li 元素，则使用后代选择器 ul li。
二、兄弟选择器
CSS3 兄弟选择器是一种选择器，可以用来选择指定元素的同级兄弟元素。它是通过 ~ 或 + 符号来实现的。
- "~" 符号表示选择所有指定元素之后的兄弟元素，包括它自己。
- "+" 符号表示选择紧接在指定元素之后的兄弟元素，不包括它自己。
语法格式如下：
/* 选择所有指定元素之后的兄弟元素 */
元素 ~ 兄弟元素 {
/* 属性值 */
}
/* 选择紧接在指定元素之后的兄弟元素 */
元素 + 兄弟元素 {
/* 属性值 */
}
下面是一个例子，选择紧接在 class 为 "box" 的 div 元素后面的所有 p 元素：
<div class="box"></div>
<p>选中</p>
<p>选中</p>
<p>不选中</p>
.box + p {
color: red;
}
在上面的例子中，只有前两个 p 元素会被选择，而最后一个则不会被选择。
再来看一个例子，选择所有 class 为 "item" 的 div 元素之后的所有 h3 元素：
<div class="container">
<div class="item"></div>
<h3>选中</h3>
<p>不选中</p>
<h3>选中</h3>
<h3>选中</h3>
<div class="item"></div>
<h3>选中</h3>
</div>
.item ~ h3 {
color: red;
}
在上面的例子中，除了第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外，其它的 h3 元素都会被选择。
需要注意的是，CSS3 兄弟选择器只能选择同级兄弟元素，不能选择父元素或子元素。若需要选择其他类型的元素，则需要使用其他类型的选择器。
下面是一个完整的例子，可以更好地理解兄弟选择器的用法：
<!DOCTYPE html>
<html>
<head>
<title>CSS3 兄弟选择器</title>
<style type="text/css">
.box + p {
color: red;
}
.item ~ h3 {
color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<p>选中</p>
<p>选中</p>
<p>不选中</p>
<div class="container">
<div class="item"></div>
<h3>选中</h3>
<p>不选中</p>
<h3>选中</h3>
<h3>选中</h3>
<div class="item"></div>
<h3>选中</h3>
</div>
</body>
</html>
三、结构伪类选择器
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 元素的第一个子元素和最后一个子元素：
<div class="container">
<h3>第一个子元素</h3>
<p>不选中</p>
<p>不选中</p>
<p>不选中</p>
<h3>最后一个子元素</h3>
</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 元素：
<ul class="list">
<li>不选中</li>
<li>选中</li>
<li>不选中</li>
<li>选中</li>
<li>不选中</li>
</ul>
.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 元素，并设置其颜色为红色。
需要注意的是，结构伪类选择器通常是基于元素在文档中的位置来进行选择的，因此对于动态生成的元素可能不起作用。
下面是一个完整的例子，可以更好地理解结构伪类选择器的用法：
<!DOCTYPE html>
<html>
<head>
<title>CSS3 结构伪类选择器</title>
<style type="text/css">
.container:first-child {
color: red;
}
.container:last-child {
color: blue;
}
.list li:nth-child(2),
.list li:nth-child(4) {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h3>第一个子元素</h3>
<p>不选中</p>
<p>不选中</p>
<p>不选中</p>
<h3>最后一个子元素</h3>
</div>
<ul class="list">
<li>不选中</li>
<li>选中</li>
<li>不选中</li>
<li>选中</li>
<li>不选中</li>
</ul>
</body>
</html>
四、伪元素选择器
CSS3中的伪元素选择器是通过在选择器的末尾加上双冒号(::)来表示的。伪元素选择器用于向某一元素的某一部分添加样式，而不是对整个元素进行样式设置。以下是CSS3中常用的伪元素选择器及其用途：
-
::before伪元素：用于在某个元素的内容前面添加内容。
-
::after伪元素：用于在某个元素的内容后面添加内容。
-
::first-letter伪元素：用于设置某一元素的第一个字母的样式。
-
::first-line伪元素：用于设置某一元素的第一行的样式。
-
::selection伪元素：用于设置用户选中文本的样式。
下面是伪元素选择器的代码演示：
<style>
/* ::before和::after伪元素 */
.box::before {
content: "Before";
display: block;
font-weight: bold;
}
.box::after {
content: "After";
display: block;
font-weight: bold;
}
/* ::first-letter伪元素 */
.first-letter::first-letter {
font-size: 30px;
font-weight: bold;
}
/* ::first-line伪元素 */
.first-line::first-line {
color: red;
font-size: 20px;
font-weight: bold;
}
/* ::selection伪元素 */
.selected::selection {
background-color: yellow;
color: black;
}
</style>
<div class="box">
This is a box.
</div>
<p class="first-letter">
This is a paragraph with a big first letter.
</p>
<p class="first-line">
This is a paragraph. This is the first line of the paragraph.
</p>
<p class="selected">
Select this text to see the ::selection pseudo-element in action.
</p>
上述代码演示了如何使用伪元素选择器给不同的元素添加样式。我们可以在浏览器中查看效果。
五、属性选择器
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 示例：
<p title="example">This is an example paragraph.</p>
<p class="example-1">This is an example paragraph.</p>
<p class="example-2">This is an example paragraph.</p>
<a href="https://www.google.com">This is a link to Google.</a>
<a href="https://www.example.com/file.pdf">This is a link to a PDF file.</a>
<a href="https://www.google.com/search?q=example">This is a link to a Google search for "example".</a>
上述代码执行的效果如下所示：
