你还在依赖 .class、#id 和 element 这些基础选择器吗？那么，猜猜看？CSS 其实还有一些 非常强大的高级选择器，它们能真正提升你的样式编写能力。这些高级选择器可以让你以你从未想到的方式定位元素——帮助你编写更简洁、更高效的代码。
在本文中，我们将探索 5 个你可能还没使用过的高级 CSS 选择器，但你绝对应该使用它们！此外，我们还将深入探讨每个选择器的实际用例和常见场景，告诉你如何用它们节省时间。
1. :nth-child() 选择器
我们都知道如何定位特定的类或 ID，但如果你想根据元素在父元素中的位置来定位该怎么办呢？这时 **:nth-child()** 选择器就派上用场了。这个选择器非常灵活，允许你根据元素在父元素中的顺序选择元素。
如何工作：
:nth-child() 选择器接受一个公式（如 2n、3n+1 等）来定位特定元素。这里是一些示例说明：
- **2n** 定位每个偶数的子元素。
- **2n+1** 定位每个奇数的子元素。
- **3n** 定位每第三个子元素。
基本示例：
/* 选择每个第二个项目 */
li:nth-child(2n) {
color: blue;
}
<ul>
<li>Item 1</li>
<li>Item 2</li> <!-- 这个将会变成蓝色 -->
<li>Item 3</li>
<li>Item 4</li> <!-- 这个将会变成蓝色 -->
</ul>
更高级的用法：
你可以使用 :nth-child() 定位更复杂的模式。例如，在表格中实现交替行颜色：
/* 表格行的斑马条纹 */
tr:nth-child(odd) {
background-color: #f2f2f2;
}
或者，跳过第一个项目并选择每第三个列表项：
li:nth-child(3n+1) {
background-color: lightcoral;
}
常见陷阱：
不要将 :nth-child() 和 :nth-of-type() 混淆。后者只适用于特定类型的元素（如 p 或 div），而 :nth-child() 对 任何元素 都有效，无论类型如何。
2. :not() 选择器 ?
:not() 选择器允许你从样式规则中排除元素，这可以通过消除特定情况的样式覆盖来简化你的 CSS。这在你希望广泛应用样式但需要排除某些元素的场景中特别有用。
基本示例：
/* 为所有段落添加样式，除了带有 "no-style" 类的段落 */
p:not(.no-style) {
color: green;
}
<p>Styled paragraph</p> <!-- 这个将会变成绿色 -->
<p class="no-style">Not styled</p> <!-- 这个不会受到影响 -->
高级用法：
假设你有一个包含多个项目的导航菜单，但你不希望将“首页”链接的样式与其他链接一样。你可以使用 :not() 来排除它：
/* 为所有菜单项添加样式，除了 "Home" 链接 */
.nav-item:not(.home) {
font-weight: bold;
}
<ul>
<li class="nav-item home">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
高级技巧：
你可以将 :not() 与其他选择器结合起来创建高度特定的规则。例如，你可以排除某些 nth-child 元素：
/* 为每个第二个列表项添加样式，除了带有 "special" 类的项 */
li:nth-child(2n):not(.special) {
background-color: yellow;
}
3. ~ (一般兄弟选择器) ?
一般兄弟选择器 (~) 允许你定位 所有在特定元素之后的兄弟元素。当你想要根据兄弟关系应用样式时，这非常有用。
如何工作：
一般兄弟选择器将选择指定元素之后的所有兄弟元素，但它们不需要是紧邻的。
示例：
/* 为所有跟在 h2 之后的段落添加样式 */
h2 ~ p {
margin-left: 20px;
}
<h2>Heading</h2>
<p>This paragraph will be indented.</p>
<p>This one too!</p>
<h2>Another heading</h2>
<p>This one will not be indented, as it follows a different heading.</p>
高级用法：
想象你有一个常见问题解答（FAQ）部分，你想要为每个问题之后的所有答案添加样式，而不需要将它们包裹在额外的容器中：
/* 为每个问题之后的所有 div 添加样式 */
.question ~ .answer {
font-style: italic;
}
<div class="question">What is CSS Grid?</div>
<div class="answer">CSS Grid is a layout system...</div>
<div class="answer">You can create complex layouts easily.</div>
4. ^= (以...开头) 选择器
^= 选择器允许你定位属性值以特定值开头的元素。这在处理动态类名、数据属性或共享公共前缀的其他属性时特别有用。
基本示例：
/* 定位类名以 "btn-" 开头的元素 */
[class^="btn-"] {
padding: 10px;
border-radius: 5px;
}
<button class="btn-primary">Primary Button</button> <!-- 已经被应用样式 -->
<button class="btn-secondary">Secondary Button</button> <!-- 已经被应用样式 -->
高级用法：
你可以将 ^= 选择器与其他伪类结合起来，以进行更复杂的选择。例如，为所有 data-* 属性以 data-product 开头并且仅定位第一个元素添加样式：
/* 定位第一个数据属性以 "product" 开头的元素 */
[data-product^="product"]:first-child {
background-color: lightblue;
}
SEO 和无障碍性的应用场景：
这个选择器在处理 数据属性 时也非常有用。如果你正在动态生成元素（例如产品、用户等），^= 选择器可以帮助你在多个组件中创建一致的样式。
5. ::before 和 ::after 伪元素
这些伪元素允许你在元素之前或之后插入内容，完全通过 CSS 实现。它们非常适合添加装饰元素、图标，甚至是功能性内容，而无需修改 HTML。
基本示例：
/* 在每个 h2 之前添加火焰 emoji */
h2::before {
content: " ";
color: red;
}
<h2>Hot Topic</h2> <!-- 输出: " Hot Topic" -->
高级用法：
- 创建分隔线：你可以使用 ::before 或 ::after 在内容之间添加分隔线，而无需更改 HTML 结构。
h2::after {
content: "";
display: block;
height: 2px;
background-color: #000;
margin-top: 10px;
}
- 创建类似工具提示的效果：你可以使用伪元素在鼠标悬停在元素上时创建类似工具提示的效果：
.button::after {
content: "Click me!";
display: none;
position: absolute;
background-color: yellow;
padding: 5px;
border-radius: 3px;
}
.button:hover::after {
display: block;
}
常见陷阱：
记住，::before 和 ::after 不能用于自闭合元素，如 <img> 或 <input>。它们需要可以包含子元素的内容元素，例如 <div>、<p> 或 <h1>。
加分项：组合选择器，实现最大效能
CSS 的一个好处是选择器可以 组合 使用，以创建超特定的规则。这里有一些示例：
示例 1：定位每个第三个子元素，但排除特殊项
/* 选择每个第三个列表项，但排除带有 "special" 类的项 */
li:nth-child(3n):not(.special) {
background-color: yellow;
}
示例 2：根据属性和兄弟关系进行样式设置
/* 选择所有跟在 data 属性以 "product-" 开头的 div 后面的兄弟 div */
div[data-product^="product-"] ~ div {
border: 1px solid #ccc;
}
这些组合让你对样式有 细粒度的控制，使你可以在不需要臃肿的 CSS 或额外类名的情况下，创建动态、响应式的设计。
结论
这些 5 个高级 CSS 选择器（加上一个额外的组合技巧！）将极大地改善你编写样式表的方式。无论你是在开发大型应用程序还是小型登陆页面，掌握这些选择器将让你能够以你未曾想象过的方式来定位元素，赋予你更大的灵活性和控制力。