程序员求职经验分享与学习资料整理平台

网站首页 > 文章精选 正文

少数人知道的 10 个神奇 CSS 选择器

balukai 2025-03-25 10:53:40 文章精选 9 ℃

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

大多数人熟悉 ID 选择器、类选择器或元素选择器，甚至伪元素的使用也很常见。然而，你知道 CSS 其实还有许多不为人知的强大选择器吗？

今天，就带你揭秘一些鲜有人知但却非常实用的 CSS 选择器，让你在样式控制上更上一层楼！

1. 属性选择器

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

基础属性选择器

Bash
a[href] {
  color: blue;
}

这个选择器会为所有包含 href 属性的 元素添加蓝色字体样式。

指定属性值的选择器

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

此规则仅作用于 type="text" 的输入框。

匹配部分属性值的选择器

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

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

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

这些选择器可以分别选中以 https 开头的链接、以 .pdf 结尾的链接，以及包含 example 关键字的链接，并应用不同的样式。

2. :nth-child() 选择器

该伪类选择器可以基于元素在其父元素中的位置来应用样式：

Bash
li:nth-child(odd) {
  background-color: #f9f9f9;
}

这将使奇数序号的

  • 元素具有不同的背景颜色。

    3. :not() 选择器

    想要排除某些特定元素？:not() 选择器可以帮你实现：

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

    以上代码会为所有 不 具有 .primary 类的

    最近发表
    标签列表