你是否仍然依赖像 .class、#id 和 element 这样的基本选择器？那么，你知道吗？CSS 中有一些超级强大的高级选择器，可以真正提升你的样式设计水平。这些高级选择器让你以前从未想过的方式来定位元素，帮助你编写更干净、更高效的代码。
在本文中，我们将探讨5个高级 CSS 选择器，这些选择器你可能还没有使用过，但绝对应该使用！此外，我们将深入探讨每个选择器可以节省您时间的实际用例和常见场景。
我们都知道如何定位特定类或 ID，但如果你想根据它们在父元素中的位置来定位元素呢？这时就需要用到**:nth-child() 选择器**。这个选择器非常灵活，允许你根据元素在父元素中的顺序来选择元素。
工作原理：
:nth-child() 选择器接受一个公式（如 2n、3n+1 等）来定位特定元素。以下是一个简要说明：
-
2n定位每个偶数子元素。 -
2n+1定位每个奇数子元素。 -
3n定位每第三个子元素。
/* 选择每第二个项目 */
li:nth-child(2n) {
color: blue;
}
<ul>
<li>项目 1</li>
<li>项目 2</li> <!-- 这将是蓝色的 -->
<li>项目 3</li>
<li>项目 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() 适用于任何元素，无论类型如何。
:not() 选择器允许你排除样式规则中的元素，这可以通过消除对特定情况下样式的覆盖来简化你的 CSS。这在你想要广泛应用样式但需要排除某些元素的情况下特别有用。
/* 样式所有段落，除了具有类“no-style”的段落 */
p:not(.no-style) {
color: green;
}
<p>已设置样式的段落</p> <!-- 这将是绿色的 -->
<p class="no-style">未设置样式</p> <!-- 这将不受影响 -->
假设你有一个带有多个项目的导航菜单，但你不想将“主页”链接与其他链接样式相同。你可以使用 :not() 来排除它：
/* 样式所有菜单项，除了“主页”链接 */
.nav-item:not(.home) {
font-weight: bold;
}
<ul>
<li class="nav-item home">主页</li>
<li class="nav-item">关于</li>
<li class="nav-item">联系</li>
</ul>
你可以将 :not() 与其他选择器结合使用，创建高度特定的规则。例如，排除某些 nth-child 元素：
/* 样式每第二个列表项，但排除具有“special”类的项 */
li:nth-child(2n):not(.special) {
background-color: yellow;
}
通用兄弟选择器（~）允许你定位跟随特定元素的所有兄弟元素。当你想根据它们的兄弟关系应用样式于元素时，这将非常方便。
通用兄弟选择器将选择指定元素之后的所有兄弟元素，但它们不需要紧邻。
/* 样式所有跟随 h2 元素的段落 */
h2 ~ p {
margin-left: 20px;
}
<h2>标题</h2>
<p>这个段落将缩进。</p>
<p>这个也是！</p>
<h2>另一个标题</h2>
<p>这个不会缩进，因为它跟随不同的标题。</p>
想象一下，你有一个 FAQ 部分，你希望样式化每个问题后面的所有答案而无需将它们包装在额外的容器中：
/* 样式所有问题后面的 div */
.question ~ .answer {
font-style: italic;
}
<div class="question">CSS Grid 是什么？</div>
<div class="answer">CSS Grid 是一种布局系统...</div>
<div class="answer">你可以轻松创建复杂的布局。</div>
^= 选择器允许你定位属性以特定值开头的元素。当处理动态类名、数据属性或其他共享相同前缀的属性时，这将非常有用。
/* 定位类以“btn-”开头的元素 */
[class^="btn-"] {
padding: 10px;
border-radius: 5px;
}
<button class="btn-primary">主要按钮</button> <!-- 已设置样式 -->
<button class="btn-secondary">次要按钮</button> <!-- 已设置样式 -->
你可以将 ^= 选择器与其他伪类结合使用以进行更复杂的选择。例如，样式所有以 data-product 开头的 data-* 属性，并仅定位第一个：
/* 定位第一个以“data-product”开头的数据属性元素 */
[data-product^="product"]:first-child {
background-color: lightblue;
}
当处理数据属性时，此选择器也非常有用。如果你正在动态生成元素（例如产品、用户等），^= 选择器可以帮助你在多个组件之间创建一致的样式。
这些伪元素允许你通过 CSS 在元素之前或之后插入内容。它们非常适用于添加装饰元素、图标，甚至功能性内容，而无需修改你的 HTML。
/* 在每个 h2 元素之前添加火焰表情 */
h2::before {
content: "🔥 ";
color: red;
}
<h2>热门话题</h2> <!-- 输出："🔥 热门话题" -->
- 创建分隔符：你可以使用
::before或::after在内容之间添加分隔符而不更改 HTML 结构。
h2::after {
content: "";
display: block;
height: 2px;
background-color: #000;
margin-top: 10px;
}
- 创建类似工具提示的效果：你可以使用伪元素在悬停在元素上时创建类似工具提示的效果：
.button::after {
content: "点击我！";
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 最棒的地方之一是可以结合选择器创建超级具体的规则。以下是一些示例：
/* 选择每第三个列表项，但排除具有“special”类的项 */
li:nth-child(3n):not(.special) {
background-color: yellow;
}
/* 选择所有跟随具有以“product-”开头的数据属性的 div 的兄弟 div */
div[data-product^="product-"] ~ div {
border: 1px solid #ccc;
}
这些组合使你可以更精细地控制你的样式，使得创建动态、响应式设计变得更容易，而无需臃肿的 CSS 或额外的类。
这些5个高级 CSS 选择器（加上一个奖励组合技巧！）将极大地改善你编写样式表的方式。无论你是在开发大型应用程序还是小型落地页，掌握这些选择器将为你提供灵活性和控制，让你以前未曾想象的方式定位元素。
