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

以上代码会为所有 不 具有 .primary 类的 按钮应用灰色背景。

---

4. :focus 选择器

提升用户体验和可访问性的一种方式是给获取焦点的元素添加样式：

input:focus {
  outline: 2px solid blue;
}

当输入框获得焦点时，会显示一个蓝色的外边框。

---

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

这两个伪元素可以在某个元素的前后插入内容，无需修改 HTML 结构：

h1::before {
  content: "§ ";
  color: grey;
}

p::after {
  content: " (阅读更多)";
  color: blue;
}

上面的示例会在所有

标题前添加灰色的 "§ " 符号，并在每个

段落后面附加 "（阅读更多）" 的蓝色文本。

---

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;
}

这样，所有空的

元素都会带有红色虚线边框。

---

9. :checked 选择器

专门用于选中 复选框（checkbox） 或 单选按钮（radio） 的样式控制：

input[type="checkbox"]:checked + label {
  font-weight: bold;
}

当复选框被选中时，相关的 标签会变成加粗字体。

---

10. 组合选择器

CSS 选择器可以组合使用，以实现更精准的样式控制。例如：

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

这个规则会为 以 https 开头且不包含 "example" 关键字 的链接，在其后面添加绿色的 "（安全）" 标识。

Tags：css伪元素选择器

• 上一篇： 制定软件开发方案的步骤主要有哪些?
• 下一篇： CSS入门:样式规则与选择器（css样式选择器有哪些）

猜你喜欢

• 2025-03-25 CSS中常用到的函数属性笔记（css用语）
• 2025-03-25 css 设置盒子阴影，阴影和背景图保持一致
• 2025-03-25 使用这些不太常用的CSS属性，布局效率上又提高了一个层次
• 2025-03-25 游戏厅那些生不逢时的街机大作，每一款都代表着一个时代
• 2025-03-25 又一个布局利器，CSS 伪类 :placeholder-shown
• 2025-03-25 炫酷的CSS3 loading加载动画，总有一款适合你
• 2025-03-25 新拟物化，会是下一个UI设计趋势吗?
• 2025-03-25 不再有压力 用来发泄的10款平板小游戏
• 2025-03-25 伪元素黑魔法:一个替代onerror解决图片加载失败的方案
• 2025-03-25 尚硅谷禹神版前端入门教程发布（尚硅谷前端贴吧）