一、子级选择器
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>
上述代码执行的效果如下所示：
