在 Web 开发中，CSS 扮演着至关重要的角色，但很多开发者并没有真正发掘它的全部潜力！
大多数人熟悉 ID 选择器、类选择器或元素选择器，甚至伪元素的使用也很常见。然而，你知道 CSS 其实还有许多不为人知的强大选择器吗？
今天，就带你揭秘一些鲜有人知但却非常实用的 CSS 选择器，让你在样式控制上更上一层楼！
1. 属性选择器
属性选择器可以根据 HTML 元素的属性来应用样式，而无需额外添加类或 ID。
基础属性选择器
a[href] {
color: blue;
}这个选择器会为所有包含 href 属性的 <a> 元素添加蓝色字体样式。
指定属性值的选择器
input[type="text"] {
border: 1px solid #ccc;
}此规则仅作用于 type="text" 的输入框。
匹配部分属性值的选择器
/* 以某个值开头（^=） */
a[href^="https"] {
color: green;
}
/* 以某个值结尾（$=） */
a[href$=".pdf"] {
color: red;
}
/* 包含某个值（*=） */
a[href*="example"] {
color: orange;
}这些选择器可以分别选中以 https 开头的链接、以 .pdf 结尾的链接，以及包含 example 关键字的链接，并应用不同的样式。
2. :nth-child() 选择器
该伪类选择器可以基于元素在其父元素中的位置来应用样式：
li:nth-child(odd) {
background-color: #f9f9f9;
}这将使奇数序号的 <li> 元素具有不同的背景颜色。
3. :not() 选择器
想要排除某些特定元素？:not() 选择器可以帮你实现：
button:not(.primary) {
background-color: grey;
}以上代码会为所有 不 具有 .primary 类的 <button> 按钮应用灰色背景。
4. :focus 选择器
提升用户体验和可访问性的一种方式是给获取焦点的元素添加样式：
input:focus {
outline: 2px solid blue;
}当输入框获得焦点时，会显示一个蓝色的外边框。
5. ::before 和 ::after 伪元素
这两个伪元素可以在某个元素的前后插入内容，无需修改 HTML 结构：
h1::before {
content: "§ ";
color: grey;
}
p::after {
content: " (阅读更多)";
color: blue;
}上面的示例会在所有 <h1> 标题前添加灰色的 "§ " 符号，并在每个 <p> 段落后面附加 "（阅读更多）" 的蓝色文本。
6. ::first-line 选择器
想让段落的首行样式有所不同？可以这样做：
p::first-line {
font-weight: bold;
color: red;
}这会让段落的首行变成 加粗 且 红色。
7. ::first-letter 选择器
如果你想让段落的首字母更具视觉吸引力，可以使用 ::first-letter：
p::first-letter {
font-size: 2em;
color: green;
}这样，所有段落的第一个字母都会被放大，并且颜色变成绿色。
8. :empty 选择器
这个选择器可以选中 没有子元素（包括文本内容）的 HTML 元素：
div:empty {
border: 1px dashed red;
}这样，所有空的 <div> 元素都会带有红色虚线边框。
9. :checked 选择器
专门用于选中 复选框（checkbox） 或 单选按钮（radio） 的样式控制：
input[type="checkbox"]:checked + label {
font-weight: bold;
}当复选框被选中时，相关的 <label> 标签会变成加粗字体。
10. 组合选择器
CSS 选择器可以组合使用，以实现更精准的样式控制。例如：
a[href^="https"]:not([href*="example"])::after {
content: " (安全)";
color: green;
}这个规则会为 以 https 开头且不包含 "example" 关键字 的链接，在其后面添加绿色的 "（安全）" 标识。
结语
希望这篇文章能帮助你更好地理解 CSS 选择器的强大之处。
