CSS 选择器 – 类、名称、子选择器

简单的 CSS 选择器

选择器允许您定位并选择文档的特定部分以实现样式设计。

简单选择器直接选择一个或多个元素：

• 通过使用通用选择器，*.
• 基于元素的名称/类型。
• 基于元素的类值。
• 基于元素的 ID 值。

通过学习最简单的选择器如何工作，您可以了解如何使用更复杂的选择器。

如果您有一些编写 CSS 代码的经验，那么简单的选择器通常是您最常使用的选择器，也是您最熟悉的选择器。

CSS 通用选择器

通用选择器，也称为通配符，选择所有内容 - 文档中的每个元素。

要使用通用选择器，请使用星号字符*。

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">*</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

在添加任何其他样式之前，您可以使用通用选择器将文件顶部的浏览器默认填充和边距重置为零：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">*</span> <span style="color:#999999">{</span>
    <span style="color:#990055">padding</span><span style="color:#999999">:</span> 0<span style="color:#999999">;</span>
    <span style="color:#990055">margin</span><span style="color:#999999">:</span>  0<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

CSS 类型选择器

CSS 类型选择器选择指定类型的所有 HTML 元素。

要使用它，请提及 HTML 元素的名称。

例如，如果您想将样式应用于 HTML 文档中的每个段落，您可以指定以下元素p：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">p</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

上面的代码匹配并选择文档中的所有元素并设置它们的样式。 p

CSS 类选择器

类选择器根据给定类的值匹配并选择 HTML 元素。具体来说，它选择文档中具有特定类名的每个元素。

使用类选择器，您可以一次选择多个元素并以相同的方式设置它们的样式，而无需分别为每个元素复制和粘贴相同的样式。

类是可重用的，这使得它们成为练习 DRY 开发的一个不错的选择。 DRY 是一种编程原则，是“Don’t Repeat Yourself”的缩写。顾名思义，目的是尽可能避免编写重复的代码。

要使用类选择器选择元素，请使用点字符 ，.后跟类的名称。

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">.my_class</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

在上面的代码中，my_class选择了 类的元素并相应地设置样式。

CSS ID 选择器

ID 选择器根据 HTML 元素的 ID 属性值来选择该元素。

请记住，元素的 ID 在文档中应该是唯一的，这意味着应该只有一个 HTML 元素具有给定的 ID 值。您不能在该元素之外的其他元素上使用相同的 ID 值。

要选择具有特定 ID 的元素，请使用哈希字符 ，#后跟 ID 值的名称：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">#my_id</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

上面的代码将仅匹配 ID 值为 的唯一元素my_id。

值得一提的是，最好尝试限制此选择器的使用，并选择使用类选择器。使用 ID 选择器应用样式并不理想，因为样式不可重用。

CSS 属性选择器

许多 HTML 元素都有属性。

HTML 属性：

• 提供有关 HTML 元素的附加信息。
• 始终在开始（或开始）标记中指定。
• 通常以名称/值对的形式出现，例如name="value".
• 名称/值对value中的 应该用引号引起来。

您可能遇到过的最流行的 HTML 属性之一是 属性href，它被添加到开始标记并指定标记链接到的<a>URL ：<a>

<span style="color:var(--gray85)"><code class="language-html"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>a</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>https://www.freecodecamp.org/<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>The best place to learn to code for free!<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>a</span><span style="color:#999999">></span></span>
</code></span>

href, ,的值https://www.freecodecamp.org/是用户单击链接文本 时将转到的 URL The best place to learn to code for free!。

属性选择器根据属性或特定属性值的存在来匹配和选择 HTML 元素。

有不同类型的属性选择器。

以下是一些最常见的属性选择器。

选择[attribute]器

要使用属性选择器，请使用一对方括号[]来选择所需的属性。

属性选择器的一般语法如下：

<span style="color:var(--gray85)"><code class="language-css">element[attribute]
</code></span>

如果给定属性存在，则此选择器选择一个元素。

在以下示例中，attr无论 的具体值是什么，都会选择具有该属性的元素attr：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a[attr]</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

在上面的示例中，无论 的值如何，都会选择a具有属性名称的元素。attrattr

话虽如此，您可以更具体地设计您的造型。

选择[attribute="value"]器

您可以使用以下语法指定属性的值：

<span style="color:var(--gray85)"><code class="language-css">element[attribute=<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">"value"</span></span>]
</code></span>

因此，如果您想要使用具有精确值 的属性来设置a元素的样式，您将执行以下操作：attr1

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a[attr="1"]</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

上面的代码匹配属性名称具有精确值 的a元素。attr1

选择[attribute^="value"]器

您还可以使用以下语法指定属性的值以特定字符开头：

<span style="color:var(--gray85)"><code class="language-css">element[attribute^=<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">"value"</span></span>]
</code></span>

例如，如果您想要选择a具有attr以 开头的值的属性的任何元素并设置其样式www，您将执行以下操作：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a[attr^="www"]</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

上面的代码选择属性名称具有以 开头的值的任何a元素。attrwww

选择 [attribute$="value"]器

您还可以使用以下语法指定属性的值以特定字符结尾：

<span style="color:var(--gray85)"><code class="language-css">element[attribute$=<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">"value"</span></span>]
</code></span>

例如，如果您想要选择属性名称以 结尾的a元素，您可以执行以下操作：attr.com

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a[attr$=".com"]</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

选择[attribute*="value"]器

您还可以指定属性值包含特定的子字符串 - 该选择器称为属性包含子字符串选择器，并具有以下语法：

<span style="color:var(--gray85)"><code class="language-css">element[attribute*=<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">"value"</span></span>]
</code></span>

在这种情况下，字符串value需要出现在属性值中，后跟任意数量的其他字符 -value不需要是整个单词。

例如，如果您想要选择具有包含字符串 的属性a的元素，您可以执行以下操作：attrfree

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a[attr*="free"]</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span>value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

当属性值中存在字符串时，上面的代码会选择a具有属性名称的元素- 即使作为子字符串（子字符串是另一个单词中的单词）。attrfree

只要属性的值包含free，就会选择 HTML 元素 -例如，这可以匹配attr值为free、freeCodeCamp或的属性。freediving

选择[attribute~="value"]器

您还可以使用以下语法指定选择器匹配包含整个单词的属性值：

<span style="color:var(--gray85)"><code class="language-css">element[attribute~= <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">"value"</span></span>]
</code></span>

在这种情况下，字符串value需要是一个完整的单词。

例如，如果您想要选择属性名称包含单词 且值包含单词 的a元素，您可以执行以下操作：attrfree

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a[attr~= "free"]</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

上面的代码将匹配一个attr属性，其值free包含不同类型的空格。

该代码不会选择值为attr或freeCodeCamp就像freediving您在前面的示例中看到的那样的元素，因为free它本身需要是一个完整的单词 - 而不是子字符串。

分组 CSS 选择器

使用分组选择器，您可以一次定位多个元素并设置其样式。

要使用分组选择器，请使用逗号,对要选择的不同元素进行分组和分隔。

例如，以下是您如何同时定位多个元素（例如divs、ps 和s）并对每个元素应用相同的样式：span

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">div, p, span</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

上面的代码匹配页面上的所有div、p和元素，并且这三个元素将共享相同的样式。span

CSS 组合器

组合器允许您根据元素之间的关系及其在文档中的位置来组合两个元素。

本质上，您可以通过解释这些 CSS 选择器之间关系的方式组合两个简单的选择器。组合器是一种选择器，它指定并描述两个选择器之间的关系。

组合器有四种类型：

• 后代组合器。
• 直接子组合器。
• 一般兄弟组合器。
• 相邻兄弟组合器

后代组合器

顾名思义，后代组合器仅选择指定元素的后代。

本质上，您首先提到父元素，留一个空格，然后提到第一个元素的后代，即父元素的子元素。子元素是父元素内部的元素。

我们以以下为例：

<span style="color:var(--gray85)"><code class="language-html"><span style="color:#708090"><span style="color:#999999"><!</span>DOCTYPE html<span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>html</span> <span style="color:#669900">lang</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>en<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>head</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">charset</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>UTF-8<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">http-equiv</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>X-UA-Compatible<span style="color:#999999">"</span></span> <span style="color:#669900">content</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>IE=edge<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>viewport<span style="color:#999999">"</span></span> <span style="color:#669900">content</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>width=device-width, initial-scale=1.0<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>main.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>title</span><span style="color:#999999">></span></span>Document<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>title</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>head</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>body</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>div</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>h2</span><span style="color:#999999">></span></span>I am level 2 heading<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>h2</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am a paragraph inside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>span</span><span style="color:#999999">></span></span>I am a span<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>span</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am a paragraph inside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am a paragraph outside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>body</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>html</span><span style="color:#999999">></span></span>
</code></span>

在上面的示例中，div是父元素，h2、span和两个ps 是子元素，因为它们位于 内部div。外面还有一段div。

如果您只想设置 中的段落样式div，请执行以下操作：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">div p</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> style<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

在上面的示例中，仅对div包含文本的两个段落I am a paragraph inside a div进行了样式设置。其他两个子元素和div文本外部的段落I am a paragraph outside a div不会设置样式。

直接子组合器

直接子代组合器也称为直接后代，仅选择父代的直接子代。

要使用直接子组合器，请指定父元素，然后添加字符>，后跟要选择的父元素的直接子元素。

我们以以下为例：

<span style="color:var(--gray85)"><code class="language-html"><span style="color:#708090"><span style="color:#999999"><!</span>DOCTYPE html<span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>html</span> <span style="color:#669900">lang</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>en<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>head</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">charset</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>UTF-8<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">http-equiv</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>X-UA-Compatible<span style="color:#999999">"</span></span> <span style="color:#669900">content</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>IE=edge<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>viewport<span style="color:#999999">"</span></span> <span style="color:#669900">content</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>width=device-width, initial-scale=1.0<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>main.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>title</span><span style="color:#999999">></span></span>Document<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>title</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>head</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>body</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>div</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>a</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>#<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>I am a link<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>a</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>a</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>#<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>I am a link<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>a</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>a</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>#<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>I am a link inside a paragraph<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>a</span><span style="color:#999999">></span></span><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>body</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>html</span><span style="color:#999999">></span></span>
</code></span>

有一个divwhich是父元素。

在父元素内部，有两个a元素是 的直接子元素div。

一个元素里面还有另一个a元素p。该p元素是 的子元素div，但a段落内的元素不是 的直接子元素div。

因此，要仅访问a的直接子元素div，您可以执行以下操作：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">div > a</span>  <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

上面的代码匹配a直接嵌套在该div元素内的元素，并且是直接子元素。

通用兄弟组合器

通用兄弟组合器选择兄弟。

您可以指定第一个元素和第一个元素之后的第二个元素。第二个元素不需要紧跟在第一个元素之后。

要使用通用同级组合器，请指定第一个元素，然后使用~后面跟着第一个元素的第二个元素的字符。

我们以以下为例：

<span style="color:var(--gray85)"><code class="language-html"><span style="color:#708090"><span style="color:#999999"><!</span>DOCTYPE html<span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>html</span> <span style="color:#669900">lang</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>en<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>head</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">charset</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>UTF-8<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">http-equiv</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>X-UA-Compatible<span style="color:#999999">"</span></span> <span style="color:#669900">content</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>IE=edge<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>viewport<span style="color:#999999">"</span></span> <span style="color:#669900">content</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>width=device-width, initial-scale=1.0<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>main.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>title</span><span style="color:#999999">></span></span>Document<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>title</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>head</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>body</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>div</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am paragraph inside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am a paragraph outside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>h3</span><span style="color:#999999">></span></span>I am a level three heading<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>h3</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am a paragraph outside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>body</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>html</span><span style="color:#999999">></span></span>
</code></span>

其中嵌套div了一个p元素。该特定p元素是 的子元素div。

还有两个段落包含文本I am a paragraph outside a div和一个h3元素。所有这三个元素都是该div元素的兄弟元素。

因此，要选择p该元素的同级元素div，您可以执行以下操作：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">div ~ p</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

上面的代码p对div.

它甚至对p不直接位于div元素之后的元素进行样式设置，例如元素p后面的h3。它这样做是因为它仍然出现在div.

相邻兄弟组合器

相邻同级组合器比一般同级组合器更具体。

该选择器仅匹配直接兄弟。直接兄弟姐妹是紧随第一个元素之后的兄弟姐妹。

要使用相邻同级组合符，请指定第一个元素，然后添加字符+，后跟紧跟在第一个元素后面的要选择的元素。

让我们回顾一下上一节中的示例：

<span style="color:var(--gray85)"><code class="language-html"><span style="color:#708090"><span style="color:#999999"><!</span>DOCTYPE html<span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>html</span> <span style="color:#669900">lang</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>en<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>head</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">charset</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>UTF-8<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">http-equiv</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>X-UA-Compatible<span style="color:#999999">"</span></span> <span style="color:#669900">content</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>IE=edge<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>meta</span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>viewport<span style="color:#999999">"</span></span> <span style="color:#669900">content</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>width=device-width, initial-scale=1.0<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>main.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>title</span><span style="color:#999999">></span></span>Document<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>title</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>head</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>body</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>div</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am paragraph inside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am a paragraph outside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>h3</span><span style="color:#999999">></span></span>I am a level three heading<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>h3</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I am a paragraph outside a div<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>body</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>html</span><span style="color:#999999">></span></span>
</code></span>

尽管p该元素后面的元素h3是该元素的同级元素，但它不像之前的元素那样div是直接同级元素。ph3

因此，要仅定位紧接p在 后面的元素div，您可以执行以下操作：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">div + p</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

伪类选择器

伪类选择器选择处于特定状态的元素。

元素可能处于的状态的一些示例是：

• 鼠标指针悬停在该元素上。
• 该元素是该类型中的第一个元素。
• 该链接之前已被该特定浏览器访问过。
• 之前从未从该特定浏览器访问过该链接。
• 复选框/单选按钮已被选中。

伪类选择器以冒号 开头，:后跟反映指定元素状态的关键字。

一般语法如下所示：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">element:pseudo-class-name</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

链接的伪类选择器

有基于链路状态信息的选择器。

:link当元素之前未被访问过时，选择器会应用样式：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:link</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

:visited当元素之前在当前浏览器中被访问过时，选择器适用：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:visited</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

:hover当鼠标指针悬停在元素上时应用选择器：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:hover</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

:focus当用户使用 Tab 键切换到某个元素时，选择器就会应用：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:focus</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span>value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

:active当单击并按住鼠标按钮后选择元素时，选择器将适用：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:active</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

输入的伪类选择器

您之前看到的链接选择:focus器也用于输入：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">input:focus</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

选择器:required选择所需的输入。所需的输入具有required属性。

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">input:required</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

选择:checked器选择已选中的复选框或单选按钮：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">input:checked</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span>value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

选择器:disabled选择禁用的输入。禁用的输入具有该disabled属性。默认情况下，许多浏览器将禁用的输入设置为淡出的灰色：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">input:disabled</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span>value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

位置的伪类选择器

第一个子选择器:first-child选择第一个元素，该元素将是父容器内的第一个子元素。

例如，a当元素是父容器中的第一个子元素时，您将如何选择该元素：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:first-child</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

最后一个子选择器 ，:last-child选择最后一个元素，该元素将是父容器内的最后一个子元素。

a以下是当元素是父容器中的最后一个子元素时选择元素的方法：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:last-child</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

选择:nth-child()器根据容器内的子元素在一组同级元素中的位置来选择该子元素。

它接受一个整数作为参数，并根据给定值选择一个元素。选择器的一般语法如下所示：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:nth-child(n)</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

:nth-child()当您想要基于表达式选择元素（例如选择偶数或奇数元素）时，选择器很有用：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">a:nth-child(even)</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

第一个类型选择器 ，:first-of-type选择父容器中该特定类型的第一个元素。

例如，以下是选择pa 中的第一个的方法div：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">p:first-of-type</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

最后一个类型选择器 ，:last-of-type选择父容器中该特定类型的最后一个元素。

例如，以下是选择pa 中最后一个的方法div：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">p:last-of-type</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

伪元素选择器

伪元素选择器用于设置元素特定部分的样式 - 您可以使用它们插入新内容或更改内容特定部分的外观。

例如，您可以使用伪元素对元素的第一个字母或第一行进行不同的样式。您还可以使用伪元素在所选元素之前或之后添加新内容。

与前面有一个字符的伪类相反:，伪元素前面有一个::字符。

该::字符后跟一个关键字，允许您设置所选元素的特定部分的样式。

一般语法如下所示：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">element::pseudo-element-selector</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span>value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

使用伪元素选择器时，请确保使用::字符而不是:字符 - 这将有助于区分伪类和伪元素。

现在，让我们看看您将遇到的一些最常见的伪元素。

::before伪元素

您可以使用::before伪元素在元素之前插入内容：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">p::before</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

::after伪元素

您可以使用::after伪元素在元素末尾插入内容：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">p::after</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

::first-letter 伪元素

您还可以使用::first-letter伪元素来选择段落的第一个字母，当您想以某种方式设置第一个字母的样式时，这会很有帮助：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">p::first-letter</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>

::first-line伪元素

您可以使用::first-line伪元素来选择段落的第一行：

<span style="color:var(--gray85)"><code class="language-css"><span style="color:#669900">p::first-line</span> <span style="color:#999999">{</span>
    <span style="color:#990055">property</span><span style="color:#999999">:</span> value<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>