4.5 高级选择器与属性选择器
4.5 高级选择器与属性选择器
CSS 提供了一系列强大的选择器，可以帮助开发者更精确地选择页面中的元素。除了常规的类选择器、ID 选择器和元素选择器外，CSS 还支持一些高级选择器，包括子选择器、后代选择器、相邻兄弟选择器等，以及属性选择器，这些选择器可以大大提高选择元素的精度和效率。了解这些选择器的用法，有助于我们在 CSS 中创建更简洁和高效的规则。
1. 子选择器与后代选择器
子选择器和后代选择器都用于选择某个元素的子元素或后代元素，但它们之间有细微的区别。
1.1 子选择器（>）
子选择器用于选择某个元素的直接子元素。只有与目标元素存在父子关系的元素才会被选中。
示例代码：
<div class="parent">
<p>Direct child 1</p>
<div class="child">
<p>Nested child</p>
</div>
<p>Direct child 2</p>
</div>
<style>
.parent > p {
color: red;
}
</style>
解析：
.parent > p仅选中.parent中的直接子元素<p>，不会选中嵌套在.child中的<p>。
1.2 后代选择器（空格）
后代选择器用于选择某个元素的所有后代元素（不论层级深度）。只要是目标元素的后代，都会被选中。
示例代码：
<div class="parent">
<p>Direct child 1</p>
<div class="child">
<p>Nested child</p>
</div>
<p>Direct child 2</p>
</div>
<style>
.parent p {
color: blue;
}
</style>
解析：
.parent p会选中.parent内的所有<p>元素，包括直接子元素和嵌套的<p>元素。
2. 相邻兄弟选择器（+）与一般兄弟选择器（~）
这两种选择器用于选择与某个元素相邻的兄弟元素。它们有不同的应用场景。
2.1 相邻兄弟选择器（+）
相邻兄弟选择器用于选择紧接在某个元素后面的兄弟元素。即只有在两个元素直接相邻时，第二个元素才会被选中。
示例代码：
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<div>Third element</div>
<p>Fourth paragraph</p>
</div>
<style>
p + p {
color: green;
}
</style>
解析：
p + p仅选中紧接在<p>后面的第二个<p>元素，因此，只有第二个<p>会被应用样式。
2.2 一般兄弟选择器（~）
一般兄弟选择器用于选择某个元素后面的所有兄弟元素（无论是否直接相邻）。
示例代码：
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<div>Third element</div>
<p>Fourth paragraph</p>
</div>
<style>
p ~ p {
color: purple;
}
</style>
解析：
p ~ p会选择所有在<p>元素后面的<p>元素。因此，第二个和第四个<p>会被应用样式。
3. 属性选择器
属性选择器让你能够基于元素的属性值来选择元素。这是一个非常强大的工具，特别是在需要根据元素的属性动态样式化时。
3.1 基本属性选择器（[attr]）
这个选择器用于选择具有指定属性的元素，不管该属性的值是什么。
示例代码：
<input type="text" placeholder="Enter text">
<input type="password" placeholder="Enter password">
<input type="button" value="Click me">
<style>
input[type="text"] {
border: 2px solid blue;
}
</style>
解析：
input[type="text"]选择所有type="text"的<input>元素，并给它们添加蓝色边框。
3.2 属性值匹配选择器
属性选择器还可以根据属性值进行部分匹配，支持以下几种匹配方式：
[attr="value"]：精确匹配[attr^="value"]：匹配以指定值开头的属性[attr$="value"]：匹配以指定值结尾的属性[attr*="value"]：匹配包含指定值的属性
示例代码：
<a href="https://example.com">Link 1</a>
<a href="https://github.com">Link 2</a>
<a href="https://openai.com">Link 3</a>
<style>
/* 匹配以 'https://' 开头的链接 */
a[href^="https://"] {
color: green;
}
/* 匹配以 '.com' 结尾的链接 */
a[href$=".com"] {
color: blue;
}
/* 匹配包含 'github' 的链接 */
a[href*="github"] {
color: red;
}
</style>
解析：
a[href^="https://"]选择所有href属性以https://开头的链接。a[href$=".com"]选择所有href属性以.com结尾的链接。a[href*="github"]选择所有href属性包含github的链接。
3.3 多属性选择器
你还可以组合多个属性条件来选择符合多个条件的元素。
示例代码：
<a href="https://example.com" target="_blank">Link 1</a>
<a href="https://github.com" target="_self">Link 2</a>
<a href="https://openai.com" target="_blank">Link 3</a>
<style>
/* 匹配具有特定 href 和 target 属性值的元素 */
a[href^="https://"][target="_blank"] {
color: orange;
}
</style>
解析：
a[href^="https://"][target="_blank"]选择所有href以https://开头且target="_blank"的链接。
4. 伪类选择器与伪元素选择器
除了前面提到的选择器外，CSS 还提供了伪类选择器和伪元素选择器，用于选择元素的特定状态或插入虚拟内容。
4.1 伪类选择器（:hover、:focus、:nth-child 等）
伪类选择器用于选择元素的特殊状态。例如，:hover 用于选中鼠标悬停的元素，:nth-child 用于选择某个元素的特定子元素。
示例代码：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<style>
/* 鼠标悬停时改变背景颜色 */
li:hover {
background-color: #ccc;
}
/* 选择第一个子元素 */
li:nth-child(1) {
font-weight: bold;
}
</style>
解析：
li:hover选中鼠标悬停时的<li>元素。li:nth-child(1)选中列表中的第一个<li>元素。
4.2 伪元素选择器（::before、::after）
伪元素选择器用于在元素的内容前后插入虚拟内容，例如用来添加图标、引号等。
示例代码：
<p class="quote">This is a quote.</p>
<style>
/* 在段落前添加引号 */
.quote::before {
content: "“";
font-size: 2rem;
color: gray;
}
/* 在段落后添加引号 */
.quote::after {
content: "”";
font-size: 2rem;
color: gray;
}
</style>
解析：
.quote::before在.quote元素内容前插入一个引号。.quote::after在.quote元素内容后插入一个引号。
5. 总结
CSS 的高级选择器和属性选择器可以帮助你更精确地选择元素，可极大地提升查找元素的效率。