通

通过示例回顾 CSS 选择器

2025-06-10

通过示例回顾 CSS 选择器

标题图片

你是否曾经在使用 CSS 选择器来设置某个元素的样式时遇到困难nth？该元素是某个元素的子元素的第一个兄弟元素，并且该元素包含具有特定值的属性。如果你使用过动态布局，那么你可能已经经历过这种情况了。

本文旨在提供 CSS 选择器、属性和伪类的快速参考，并附上示例。由于市面上有大量的 CSS 速查表，我原本想将其整理成一份私人文档供个人使用。但或许我可以换一种方式，让其他人更容易理解。所以，何不与大家分享呢？

对于这篇文章，在继续之前你必须了解一些基本概念，即选择器（类型、属性、id、类）、伪类、伪元素和组合器。

让我们开始吧。

选择器

尽管 CSS 教程通常将我们在此讨论的所有内容视为 CSS 选择器，但值得指出的是，CSS 样式表中每种类型的选择器都有一个特定的术语。

类型选择器

这些是用于匹配 DOM 中的元素的选择器，例如、、，p甚至自定义标签，如下例所示。divspan

类型选择器

custom {
  border: 1px solid black;
}

p {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode 
<custom>Custom element</custom>

<p>Paragraph</p>
Enter fullscreen mode Exit fullscreen mode
类选择器

这些用于选择 DOM 中具有特定类作为属性的元素。为此，你必须在.要匹配的名称开头添加 。

类选择器

.bordered {
  border: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="bordered">
    Bordered element.
</div>
Enter fullscreen mode Exit fullscreen mode
属性选择器

这些选择器将匹配具有特定关联属性的元素。它既可以匹配单个属性，也可以匹配与其值关联的属性。对于此类选择器，必须用方括号将属性名称括起来。请参阅下面的示例。

属性选择器

[name] {
  background-color: green;
}

[name="age"] {
  background-color: red;
}
Enter fullscreen mode Exit fullscreen mode 
<input type="text" name="name" placeholder="Your name" />
<input type="number" name="age" placeholder="Your age" />
Enter fullscreen mode Exit fullscreen mode

在这个例子中，您可以注意到，最初我们为所有具有 属性的元素创建了一条 CSS 规则name。这将导致您的 HTML 代码中显示两个输入框，因为它们都具有 属性。但是，之后，我们将创建一个更具体的规则，告诉浏览器对具有 属性且name值为的元素使用红色背景age，这将导致您看到最后一个输入框。

除了使用 之外，你还可以使用其他运算符来匹配值=。请查看下文。

~=

此运算符匹配以空格分隔的单词列表，其中一个单词恰好是传递的值。

属性选择器-1

[class~="bordered"] {
  border: 3px solid green;
}
Enter fullscreen mode Exit fullscreen mode 
<button class="btn bordered">Click Here</button>
Enter fullscreen mode Exit fullscreen mode
|=

此运算符与属性值为传递的精确字符串或以后跟 的字符串开头的元素进行匹配-。

属性选择器-2

[class|="primary"] {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode 
<button class="primary-btn">Click Here</button>
<p class="primary">Paragraph</p>
Enter fullscreen mode Exit fullscreen mode
^=

该运算符与以传递的字符串开头的属性值元素进行匹配。

属性选择器-3

[class^="call"] {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode 
<button class="caller">Caller</button>
<button class="called">Called</button>
<button class="calling">Calling</button>
Enter fullscreen mode Exit fullscreen mode
$=

该运算符与属性值以传递的字符串结尾的元素进行匹配。

属性选择器-4

[class$="ed"] {
  background-color: pink;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="required">
    <p>Required</p>
</div>
<div class="validated">
    <p>Validated</p>
</div>
Enter fullscreen mode Exit fullscreen mode
*=

该运算符至少匹配一次包含传递的字符串的属性值的元素。

属性选择器-5

[class*="prim"] {
  background-color: pink;
}
Enter fullscreen mode Exit fullscreen mode 
<button class="btn-primary">Click here</button>
Enter fullscreen mode Exit fullscreen mode

PS：为了以不区分大小写的方式执行这些匹配，您可以将一个附加i到规则中，例如：[attr="value" i]。

ID 选择器

这些选择器将匹配与特定标识符关联的元素。对于此类选择器，您必须在#要匹配的 ID 前添加一个。请查看下面的示例。

id选择器

#d123 {
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode 
<div>block without ID</div>
<div id="d123">block with ID of d123</div>
Enter fullscreen mode Exit fullscreen mode
通用选择器

这个用于匹配页面中的所有元素。例如，它可以用于重置所有元素的边距和填充。但是，由于它会导致页面渲染进程过载，因此不建议使用。

通用选择器

* {
  border: 1px solid yellow;
}
Enter fullscreen mode Exit fullscreen mode 
<ul>
  <li>
    <a href="#">Item 1</a>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>
    <span>Item 5</span>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

伪类

伪类用于更广泛地匹配内容，因为它们几乎在所有情况下都可以引用未直接在 DOM 中呈现的元素。这类选择器通常引用元素的状态。因此，它们可以根据用户交互动态访问。很好的例子是:link和:visited伪类，它们用于根据链接是否被访问来设置链接的样式。要使用伪类，必须:在类名开头添加一个。由于这些选择器难以在本文中静态表示，我认为最好将它们放在 JSFiddle 中，以便您可以根据需要进行一些尝试。在那里，您只需取消注释所需的 CSS 和 HTML 部分，即可在右侧选项卡中查看结果。点击此处查看以下列出的选择器示例（其中一些示例在表格下方有说明，而另一些示例过于直观，无需赘述）。

  • :focus匹配当前聚焦的元素，例如当用户单击以编辑输入或textarea元素时。

  • :active匹配用户点击元素的瞬间。只要用户在元素上持续点击，该样式就会一直生效。

  • :hover匹配鼠标当前所在的元素。

  • :empty匹配没有任何子元素的元素。

  • :valid根据每种输入类型匹配包含合法值的输入。例如，当您有一个用于输入电子邮件值的输入框时，您可以为用户输入有效的电子邮件应用样式。请注意，未设置值的输入框将被视为处于有效状态。

  • :checked匹配当前选中的复选框输入。

  • :link匹配未访问的链接。

  • :in-range匹配包含特定范围内的值的输入元素。

  • :not(selector)匹配不是作为参数传递的每个元素。

  • :first-child匹配特定父级中的第一个子级。例如，如果执行p:first-child此操作，则会匹配其父级中的第一个段落。

  • :first-of-type匹配给定类型的第一个元素。例如，如果你选择 simply，:first-of-type它将匹配特定父元素中所有同类型的第一个元素。

  • :lang(language)lang匹配具有特定值的属性的元素。

  • :nth-child(n)匹配特定父元素中的第 n 个元素。对于这些可以为索引指定整数值的规则，您可以传递类似以下类型的值2n来获取每两个索引位置的元素。

  • :nth-last-child(n)相同，nth-child但从末尾开始计数。

  • :nth-of-type(n)匹配特定父级内给定类型的第 n 个元素。

  • :nth-last-of-type(n)相同，nth-of-type但从末尾开始计数。

  • :only-of-type匹配特定父元素中唯一同类型的元素。例如，如果匹配，p:only-of-type它将匹配唯一存在的段落；如果存在多个段落，它将不匹配任何内容。

  • :only-child匹配特定父元素的唯一子元素。如果该父元素中有多个子元素，则不匹配任何元素。

  • :optional匹配没有required属性的输入元素。

  • :read-only匹配具有属性的元素read-only。

  • :read-write匹配没有read-only属性的元素。

  • :required匹配带有 的元素required attribute。

  • :root匹配文档的根元素。此选择器通常用于设置全局 CSS 变量。

伪元素

伪元素可以用来引用源代码中不存在的内容，即后续生成的内容。下面我们来看一下。如果你想查看本节的示例，请查看这个 fiddle。

  • ::after并::before用于添加和设置所选元素的最后一个和第一个子元素的样式。这通常用于向标签、输入框等添加工具提示或图标。

  • ::first-letter选择元素内文本的首字母。

  • ::first-line选择元素内文本的第一行。

  • ::selection选择用户当前选择的文本。

组合器

在我看来，组合器是 CSS 选择器中最有趣的部分。现在，你将能够整合目前所学的知识，并将其与组合器关联起来，从而获得更复杂的 CSS 规则。让我们来看看有哪些可用的 CSS 组合器。点击此处查看示例。

  • 选择器组,当您想将相同的样式应用于多个元素时可以使用此选项，因此您不必为每个元素创建不同的块，而只需列出它们,并编写一次规则即可。
h1, h2, h3, h4, h5, h6 {
  margin: 1rem;
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

上述规则同时适用margin于text-decoration所有标题标签。

  • 后代选择器空格可用于选择特定块内（后代）的元素。
.container .col {
  padding: .5rem 1rem;
}
Enter fullscreen mode Exit fullscreen mode

上面我们为所有带有 类的元素添加了填充，col这些元素位于带有 类的元素内部container

  • 子选择器：>用于选择特定元素的直系子元素。它与空格组合器不同，因为子选择器无法选择给定父元素的孙元素。
.container > ul {
  border: 1px solid black;
}
Enter fullscreen mode Exit fullscreen mode

上面我们选择了ul该块的所有直接子元素.container。

  • 相邻兄弟选择器：+此组合器用于选择给定元素的相邻兄弟元素。请查看下面的示例。
.item2 + li {
  font-size: 2rem;
}
Enter fullscreen mode Exit fullscreen mode

这里我们将 的字体大小应用于元素的直接兄弟元素2rem。请注意，此组合器和下一个组合器仅沿树向下查找。li.item2

  • 通用同级选择器~此组合器为您提供给定元素的所有同级。
.item2 ~ li {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

这里我们选择li该元素的所有兄弟元素.item2，再次查看树。

好了，就到这里！希望这篇快速回顾能帮到你 :)

附言：这是一份动态文档，如果您有任何意见、提示或了解缺少的选择器，请在评论中告诉我，我会更新它。

鏂囩珷鏉ユ簮锛�https://dev.to/willamesoares/css-selectors-reviewed-with-examples-3f29
Devto 翻译
PREV
如何整合 Spotify 和 Genius API，使用 Python 轻松抓取歌词
NEXT
什么是速率限制器以及为什么要使用它？