别再瞎找了！一文读懂超实用 CSS 选择器

在 Web 开发中，CSS 扮演着至关重要的角色，但很多开发者并没有真正发掘它的全部潜力！

大多数熟悉 ID 选择器、类选择器或元素选择器，甚至伪元素的使用也很常见。然而，CSS 其实还有许多不为人知但却非常实用的选择器，让你在样式控制上更上一层楼！

1. 属性选择器

属性选择器可以根据 HTML 元素的属性来应用样式，而无需额外添加类或 ID。

基础属性选择器

a[href] {
  color: blue;
}

案例

比如在电商网站中，所有带有链接的 <a> 标签都会变成蓝色。这样无需为每个链接手动添加类名，简化了开发流程。

指定属性值的选择器

input[type="text"] {
  border: 1px solid #ccc;
}

案例

在表单中，所有文本输入框都会自动应用边框样式。这对统一表单风格非常有用。

匹配部分属性值的选择器

/* 以某个值开头（^=） */
a[href^="https"] {
  color: green;
}

/* 以某个值结尾（$=） */
a[href$=".pdf"] {
  color: red;
}

/* 包含某个值（*=） */
a[href*="example"] {
  color: orange;
}

案例

假设你有一个页面包含多种链接：

• 链接以 https 开头的会变成绿色。
• 下载 .pdf 文件的链接会变成红色，提醒用户这是下载链接。
• 包含关键词 example 的链接会变成橙色。

2. :nth-child() 选择器

可以轻松实现交替样式（如表格或列表的奇偶项不同颜色）。

tr:nth-child(even) {
  background-color: #f5f5f5;
}

案例

在订单列表中，每隔一行添加浅灰色背景，提高可读性。

3. :not() 选择器

用于排除特定元素。

button:not(.primary) {
  background-color: #ddd;
}

案例：
在一个按钮组中，所有非主要按钮都会显示为灰色，而主要按钮保留其默认样式。

4. :focus 选择器

优化表单的用户体验。

input:focus {
  outline: none;
  box-shadow: 0 0 5px #3498db;
}

案例

当用户点击输入框时，移除默认的蓝色边框并添加优雅的蓝色阴影，提升交互体验。

5. ::before 和 ::after 伪元素

可以在不修改 HTML 的情况下，为元素添加内容。

导航栏示例：
.nav-item::after {
  content: ">";
  margin-left: 5px;
}

案例

在导航项后面自动添加一个箭头符号，增强视觉效果。

6. ::first-line 和 ::first-letter

用于排版优化。

书籍排版示例：
.chapter::first-line {
  font-weight: bold;
}

.article::first-letter {
  font-size: 2em;
}

案例

• 在书籍章节中，首行加粗，突出重点。
• 在博客文章中，使段落的首字母更大，提升阅读体验。

7. :empty 选择器

用于处理空内容的情况。

动态加载示例：
.loading::before {
  content: "Loading...";
}

.emptyList {
  display: none;
}

案例

• 当页面正在加载时，显示“Loading…”提示信息。
• 如果列表为空，则隐藏相关容器。

8. :checked 选择器

用于表单验证或动态样式。

同意条款示例：
input:checked + .terms {
  color: green;
}

案例

用户勾选“我已阅读并同意条款”后，相关文本会变成绿色，表示确认。

9. 组合选择器

通过组合多个选择器实现更精准的控制。

a[ href^="https"]:not([href*="example"])::after {
  content: "（安全）";
  color: green;
}

案例

在页面中，所有以 https 开头且不包含 example 关键词的链接会在末尾显示“（安全）”，提示用户这是一个可信链接。

结语

这些高级 CSS 选择器不仅简化了代码，还提升了开发效率和用户体验。希望这篇文章能帮助你更好地理解 CSS 的强大之处！如果你有其他喜欢的选择器或案例，欢迎在评论区分享你的经验！

以上关于别再瞎找了！一文读懂超实用 CSS 选择器的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。