如何使用 CSS 中的 ID、类和属性选择器选择 HTML 元素

作者选择了多样性在技术基金作为写给捐款计划的一部分接受捐款。

介绍

编写 CSS 选择器通常涉及设置条件并在 HTML中找到符合该条件的元素,您可以使用 element selector来选择高级别标签,但为了获得对所选元素的更多控制,您可以在 HTML 中创建特定标识符并在 CSS 中应用它们。

在本教程中,您将使用id,class和属性选择器来扩展类型到故意编写的HTML。您将开始创建一个HTML和CSS文件,您将在整个教程中编辑。您将添加id属性,并使用这些id值来瞄准类型。您还将添加class属性到元素,并将这些类值单独使用,以创建更具具体性和可重复使用的类型。

前提条件

您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 了解 CSS 的类型选择器、组合器选择器和特定特性,您可以在 How To Select HTML Elements to Style with CSS 阅读。一个空的 HTML 文件,存储在您的本地机器上作为 index.html,您可以从您所选择的文本编辑器和 Web 浏览器访问。要开始,请参阅我们的 How To Set Up Your HTML Project 教程,并遵循 How To Use and Understand HTML Elements 有关如何在您的浏览器中查看 HTML 的说明。如果您是新的 HTML,请尝试整个 [How To Bu

建立基本的HTML和CSS

要开始使用id,class和属性选择器,您首先将设置HTML和CSS代码,您将通过本教程的其余部分工作。

首先,在文本编辑器中打开index.html,然后将以下 HTML 添加到文件中:

1[label index.html]
2<!doctype html>
3<html>
4  <head>
5  </head>
6  <body>
7  </body>
8</html>

接下来,转到<head>标签并添加一个<meta>标签来定义 HTML 文件的字符集,然后添加一个<meta>标签,定义移动设备应该如何渲染页面,设置页面的标题,最后加载您以后将用<link>标签创建的 CSS 文件。

这些添加在下面的代码块中被突出,您将在整个教程中遇到这种突出方法,因为代码被添加和更改:

 1[label index.html]
 2<!doctype html>
 3<html>
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1">
 7    <title>About CSS Selectors</title>
 8    <link rel="stylesheet" href="styles.css">
 9  </head>
10  <body>
11  </body>
12</html>

在添加<head>内容后,转到<body>元素中,您将为页面添加有关CSS选项的内容。

 1[label index.html]
 2<!doctype html>
 3<html>
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1">
 7    <title>Link and Buttons with State</title>
 8    <link rel="stylesheet" href="styles.css">
 9  </head>
10  <body>
11    <header>
12      <h1>Using CSS Selectors</h1>
13    </header>
14
15    <main>
16      <section>
17        <h2>Selecting HTML To Style</h2>
18        <p>Selecting the right element and providing the right visual styles is the basis of <a href="https://do.co/community">writing CSS</a> code. Whenever you need to adjust how an element on a webpage looks, using selectors is key.</p>
19        <p><a href="https://example.com">Read this to learn more about selectors</a></p>
20      </section>
21
22      <section>
23        <h2>The Type Selector</h2>
24        <p>The type selector finds elements on the page by tag name. This is a common way to style elements on the page. Type selectors are often referred to as element selectors.</p>
25      </section>
26
27      <section>
28        <h2>Combining Selectors</h2>
29        <p>A combinator selector is defined by a space character between selectors, with the HTML ancestry reading left to right. The right-most selector is the intended target. This can be as complex or as simple as necessary to <em>scope</em>, or provide sufficient specificity, to the intended element.</p>
30      </section>
31    </main>
32  </body>
33</html>

將您的變更儲存為「index.html」並在文本編輯器中開啟。開啟您的瀏覽器並加載「index.html」以使用瀏覽器的默認風格顯示頁面內容。以下圖像顯示這些默認風格,在白色背景上使用黑色序列文本:

Black serif text in various sizes with two blue, underlined links.

接下来,回到文本编辑器,创建一个名为styles.css的文件,这是你在你的index.html中的<head>元素中引用的文件。

1[label styles.css]
2body {
3  font-family: sans-serif;
4  line-height: 1.5;
5  color: #444;
6}

此 CSS 使用一个体类型选择器,将页面的默认字体家族设置为浏览器的sans-serif字体,然后将文本的行间隔变为字体大小的 1.5 倍。

将这些更改保存到styles.css,然后返回浏览器,看看这些更改将如何显示,如下图像所示:

Dark gray sans-serif text in various sizes with two blue links with underlines.

您现在已经为您的 index.html 和 style.css 设置了起点,在下一节中,您将向 HTML 中的元素添加一个 id 属性,并在 CSS 中创建 id 选择器来将样式应用到这些元素中。

使用 ID Selector

在本节中,您将了解id属性及其用途,然后将几个id属性添加到您的HTML中,最后,您将使用这些id选择器应用布局风格。

id属性是一个独特的标识符,将页面上的内容连接在一起。例如,假设有一个元素位于网页的内容中间,具有id属性,即my-id。通过将这个id值附加到一个英镑或哈希符号(‘#’)的URL,例如http://example.com/index.html#my-id,浏览器将滚动到页面的那个部分。由于这可以作为URL的一部分和用于其他脚本目的,页面上的每个id值必须是独特的。

要开始使用id属性,请在文本编辑器中打开index.html。首先,找到<header>元素,并给它一个具有header值的id属性。接下来,转到<main>元素,并给它一个具有content值的id属性。这些id属性为内容的两个主要部分提供了一个独特的标识符。以下代码块中的突出添加表明你将对你的index.html文件进行的更改:

1[label index.html]
2...
3<header id="header">
4  ...
5</header>
6<main id="content">
7  ...
8</main>
9...

请注意,好的HTML将只有一种<header>元素和一个<main>元素,所以将独特的ID分配给已经独特的元素似乎是多余的。

请确保在继续之前将更改保存到index.html。

CSS中的id选择器使用与 URL 引用相同的格式:一个字符符号,然后是id的名称,例如#my-id。要开始使用id选择器,请在文本编辑器中打开styles.css。然后,从您的index.html中添加两个id属性值,作为group combinator(https://andsky.com/tech/tutorials/how-to-select-html-elements-to-style-with-css)`#header, #content。您将使用这个选择器将

和

`元素的内容均匀设置在页面的中间。下面的代码块有选择器块和为此布局所需的代码:

 1[label styles.css]
 2body {
 3  font-family: sans-serif;
 4  line-height: 1.5;
 5  color: #444;
 6}
 7
 8#header,
 9#content {
10  margin: 1em auto;
11  width: 90%;
12  max-width: 60ch;
13}

id选项将将1em的边缘应用于Header和Main元素的顶部和底部。在与90%的宽度属性相配时,边缘属性上的auto值将内容放在页面中心。

将您的更改保存到styles.css,然后在浏览器中打开index.html。页面内容现在集中在页面上,而不是延伸到窗口的长度上。

Text content centered to roughly half the width of the full size.

在本节中,您了解了id属性,并使用该属性将风格应用到元素中。您还了解到id属性需要具有独特的值,因为它可以被浏览器在URL和脚本中使用。

使用类选择器

在本节中,您将使用类选择器在页面上找到特定元素,使用类HTML属性中发现的值。您将重塑id选择器以使用可重复使用的类代替。

要开始使用class的元素,请在文本编辑器中打开index.html文件,在header>和main>元素上,添加一个具有content-width值的class属性,以下代码块的突出部分说明如何添加class属性:

1[label index.html]
2...
3<header id="header" class="content-width">
4  ...
5</header>
6<main id="content" class="content-width">
7  ...
8</main>
9...

将更改保存为index.html,然后在文本编辑器中打开styles.css,以创建此类值的类选择器。

类选择器与id相似,因为它在CSS中具有一个特殊的字符,该字符是由期符号(.)表示的。在styles.css文件中,用#header, #content的ID找到选择器,并用.content-width类选择器替换两个选择器。

 1[label styles.css]
 2body {
 3  font-family: sans-serif;
 4  line-height: 1.5;
 5  color: #444;
 6}
 7
 8.content-width {
 9  margin: 1em auto;
10  width: 90%;
11  max-width: 60ch;
12}

將這些變更儲存到「styles.css」並返回您的瀏覽器。更新「index.html」並且風格將保持不變. 代碼的重塑器並沒有改變風格,但改變了元素的選擇方式。

接下来,回到文本编辑器中的index.html,并将一个class属性添加到<h1>元素中,其值为style-1。

1[label index.html]
2...
3<header id="header" class="content-width">
4  <h1 class="style-1">Using CSS Selectors</h1>
5</header>
6...

接下来,在<main>元素中的每个<h2>元素上,添加一个class属性。给这三个class属性中的style-2值。

 1[label index.html]
 2...
 3<main id="content" class="content-width">
 4  <section> 
 5    <h2 class="style-2">Selecting HTML To Style</h2>
 6    ...
 7  </section>
 8
 9  <section>
10    <h2 class="style-2">The Type Selector</h2>
11    ...
12  </section>
13
14  <section>
15    <h2 class="style-2">Combining Selectors</h2>
16    ...
17  </section>
18</main>
19...

将类属性添加到index.html文件中的元素后,请确保保存更改,然后在文本编辑器中打开styles.css,并为 style-1类创建类选择器。

在styles.css的末尾添加一个名为.style-1的选择器。该期限告诉浏览器在页面上搜索一个名为style-1的类属性。然后创建一个选择器块,并添加一个具有1.25rem值的字体大小属性,一个设置为uppercase的text-transform属性,以及一个设置为0.125em字符之间的字母间隔属性。

 1[label styles.css]
 2...
 3.content-width {
 4  margin: 1em auto;
 5  width: 90%;
 6  max-width: 60ch;
 7}
 8.style-1 {
 9  font-size: 1.25rem;
10  text-transform: uppercase;
11  letter-spacing: 0.125em;
12}

接下来,创建另一个类选择器,这一次为风格2类别。请确保在类值名称之前添加时间段,然后向该选择器添加一个具有2rem值的字体大小属性,并设置一个字体重量属性为正常。

 1[label styles.css]
 2...
 3.style-1 {
 4  font-size: 1.25rem;
 5  text-transform: uppercase;
 6  letter-spacing: 0.125em;
 7}
 8
 9.style-2 {
10  font-size: 2rem;
11  font-weight: normal;
12}

将您的更改保存到 styles.css,并在浏览器中更新 index.html 文件. 现在 <h1> 内容将更小,更大,而 h2> 内容将更大,不再大胆。

Text in dark gray with a heading text that is short bold and uppercase, with other heading text much larger and title cased.

类是一个强大的选择器,因为它们可以重复使用并应用到页面上的任何元素,这意味着您可以交换风格1和风格2类的使用方式,而不需要对CSS进行更改。

要进行此更改,请打开index.html,并在<h1>元素上的类属性值style-1更改为style-2。

 1[label index.html]
 2...
 3<header id="header" class="content-width">
 4  <h1 class="style-2">Using CSS Selectors</h1>
 5</header>
 6
 7<main id="content" class="content-width">
 8  <section> 
 9    <h2 class="style-1">Selecting HTML To Style</h2>
10    ...
11  </section>
12
13  <section>
14    <h2 class="style-1">The Type Selector</h2>
15    ...
16  </section>
17
18  <section>
19    <h2 class="style-1">Combining Selectors</h2>
20    ...
21  </section>
22</main>
23...

将这些更改保存到styles.css,返回您的浏览器,然后重新加载index.html。style-2的大型、正常字体重量现在应用于<h1>元素中的内容,而style-1的更短、更高层次的风格现在应用于<h2>部分元素。

Text in dark gray with a large title case heading text with other heading text that is short bold and uppercase.

在本节中,您使用类选择器重塑了前一节中的id选择器,您还创建了两个新的类选择器,将字体风格应用于<h1>和<h2>标题元素,并交换了这些类属性值,以更改哪些元素获得了哪些风格。

组合类选择者

在本节中,你会将多个类值应用于同一个HTML元素,以便将来自多个CSS类选择器的样式结合起来。在上一节中所示的类的重复使用性是类的优势。类选择器也可以结合起来以针对更具体的元素。

首先,在文本编辑器中打开你的styles.css文件,然后添加三个新的类选择器:.color-1,.color-2和.color-3。这三个选择器中的每一个都有一个颜色属性,具有相似的HSL值,在色彩谱中有50倍的差异。这将为您提供一个可以应用于HTML元素的颜色范围。请参阅以下代码块的突出部分,了解如何添加到您的CSS文件:

 1[label styles.css]
 2...
 3.style-2 {
 4  font-size: 2rem;
 5  font-weight: normal;
 6}
 7
 8.color-1 {
 9  color: hsl(300, 70%, 40%);
10}
11
12.color-2 {
13  color: hsl(250, 70%, 40%);
14}
15
16.color-3 {
17  color: hsl(200, 70%, 40%);
18}

将更改保存到 styles.css,然后在文本编辑器中打开 index.html。您现在将添加一个颜色到

`块中的三个元素中的每个。对于第一个`

`,在` style-1`之后添加一个空间,然后添加`color-1`。在` class`属性中的每个值之间的空间表示可从 CSS 引用的额外的`class`名称。对于其他`

`元素,使用`color-2`值除非第二个`

`和第三个`

的color-3。

以下代码块的突出部分显示如何格式化额外的类值:

 1[label index.html]
 2...
 3<main id="content" class="content-width">
 4  <section> 
 5    <h2 class="style-1 color-1">Selecting HTML To Style</h2>
 6    ...
 7  </section>
 8
 9  <section>
10    <h2 class="style-1 color-2">The Type Selector</h2>
11    ...
12  </section>
13
14  <section>
15    <h2 class="style-1 color-3">Combining Selectors</h2>
16    ...
17  </section>
18</main>
19...

将您的更改保存到index.html,返回您的浏览器,并更新页面。三个<h2>部分标题保持相同的字体风格,但现在每个字体都有不同的颜色。

Three short bold uppercase headings with one magenta, one dark blue, and one teal.

就像类值在HTML中可以一起使用一样,类名称也可以结合在一起,以创建可能存在于HTML中的更具体情况。

例如, CSS 选择器 .color-1.color-2 只会选择具有包含 color-1 和 color-2 的 HTML class 值的元素。

要尝试在选择器中使用多个类名称,请在文本编辑器中打开styles.css。创建一个新的选择器,将颜色1类和颜色2类相结合。

将以下突出部分添加到您的 CSS 文件中:

 1[label styles.css]
 2...
 3.color-3 {
 4  color: hsl(200, 70%, 40%);
 5}
 6
 7.color-1.color-2 {
 8  color: hsl(275, 70%, 40%);
 9}
10
11.color-2.color-3 {
12  color: hsl(225, 70%, 40%);
13}

在此代码块中,您将组合类选择器.color1.color-2 的颜色属性设置为hsl(275,70%,40%),因为这在 300 值的 .color-1 和 250 值的 .color-2 之间半径。

请确保将您的更改保存到styles.css,然后在文本编辑器中移动到index.html,并在以下代码块中进行突出更改:

 1[label index.html]
 2...
 3<main id="content" class="content-width">
 4  <section> 
 5    <h2 class="style-1 color-1 color-2">Selecting HTML To Style</h2>
 6    ...
 7  </section>
 8  ...
 9  <section>
10    <h2 class="style-1 color-3 color-2">Combining Selectors</h2>
11    ...
12  </section>
13</main>
14...

请注意,您对组合类选择器声明的新风格将优先于每个单个类别的风格设置。这是因为组合类选择器正在选择比单个类别选择器更为具体的元素。例如,您为 .color-1 写的规则正在寻找具有 color-1 作为其类别之一的 HTML 元素。

例如,一个具有颜色-1 色-2 色-3的类值的 HTML 元素会满足颜色-1. 色-2和颜色-2. 色-3的规则。

将更改保存到index.html,然后在浏览器中刷新页面. 所有三个

元素的颜色仍然是不同的,但现在在色调中将视觉更接近。
下面的屏幕截图显示在浏览器中将如何显示:
本节向您介绍了一种方法来连接`类`值,以创建更具体的场景,以便应用风格。

使用属性选择器

在本节中,您将使用属性选择器来查找和选择一个元素. 在之前的节中,您已经了解到id和class选择器有一个标志,表示要瞄准的属性类型,然后是要选择的值。

要开始使用属性选择器,请在文本编辑器中打开 index.html 文件. 您将添加缩写的 HTML 元素 <abbr>,作为属性选择器有用的情况。将 <abbr> 放置在 <h1> 元素中的 CSS 第一个实例周围。然后,在第一个 <h2> 元素中的 HTML 第一个实例周围放置另一个 <abbr>。使用 HTML <brab>,添加一个具有 Hypertext Markup Language' 值的 title` 属性。请参考下面的代码块,以便将其格式化:

1[label index.html]
2...
3<h1 class="style-2">Using <abbr>CSS</abbr> Selectors</h1>
4...
5<h2 class="style-1 color-1 color-2">Selecting <abbr title="Hypertext Markup Language">HTML</abbr> To Style</h2>
6...

如果您正在使用 Chrome或 Firefox,具有标题属性的<abbr>元素的默认浏览器是添加一个点的底线。视觉指示器的目的是让用户在文本上浮动,在这个时刻将出现缩写的含义,即标题属性的值。下面的图像显示了默认的<abbr>风格在Firefox:

Short bold uppercase headings in purple with an abbreviation text with a dotted underline.

与Chrome和Firefox不同,一些浏览器,如Safari(https://www.apple.com/safari/)和其他较旧的浏览器,没有一个指标,当一个<abbr>元素有一个标题。

要开始使用属性选择器进行样式化,请在文本编辑器中打开styles.css文件。添加[标题]的属性选择器,然后为选择器块添加弯曲。在选择器块中,添加文本装饰属性设置为底线。然后添加文本装饰风格属性以点的值。这两种属性将平衡浏览器之间的样式。最后,要为底线添加自定义搜索,添加属性文本装饰色,并将其设置为轻灰色值hsl(0,0%,70%)。

请参阅以下代码块,以便在您的代码中格式化:

 1[label styles.css]
 2...
 3.color-2.color-3 {
 4  color: hsl(225, 70%, 40%);
 5}
 6
 7[title] {
 8  text-decoration: underline;
 9  text-decoration-style: dotted;
10  text-decoration-color: hsl(0, 0%, 70%);
11}

将您的更改保存到 styles.css,然后返回您的浏览器并更新 index.html. HTML 文本的样式现在将有一个轻灰色点的底线。

Short bold uppercase headings in purple with an abbreviation text with a light gray dotted underline.

使用[标题]属性作为选择器的一个问题是,它可以在页面上的几乎任何元素上使用,这意味着当当前选择器处于位置时,具有标题属性的<img>或<a>元素也会收到这些样式。

要对选项进行此调整,请返回文本编辑器中的styles.css。在[title]属性选项的左侧,添加abbr元素选项。请确保这些选项之间没有空间,因为这会告诉浏览器具体寻找具有title属性的<abbr>元素。下列代码块展示了这些元素的外观,添加元素选项突出:

1[label styles.css]
2...
3abbr[title] {
4  text-decoration: underline;
5  text-decoration-style: dotted;
6  text-decoration-color: hsl(0, 0%, 70%);
7}

将您的更改保存到 styles.css. 这些风格现在只适用于 <abbr> 元素中具有 title 属性. 在 <h1> 元素中的 CSS <abbr> 也不会收到这些风格。

在本节中,您使用属性选择器将风格扩展到一个<abbr>元素,以便在存在标题属性时应用风格。

创建高级属性选择器

属性选择器有助于在HTML中查找特定属性并将风格应用到它们中。但是,属性选择器也有几种方法来查找属性的值。

首先,在文本编辑器中打开你的 styles.css 文件. 在 HTML 中,有一个链接到网站 https://example.com; 针对该特定 URL 链接,为一个 href 属性创建一个属性选择器. 然后,在属性名称之后的轴承中,添加一个等价符号,然后是字符串引用。在这些引用中,添加 https://example.com。此选择器将瞄准到指定的 URL 的链接。使用 hsl(150, 70%, 40%)来添加一个 颜色 属性,使用绿色颜色。

以下代码块中的突出代码显示了在您的 styles.css 文件中如何格式化:

 1[label styles.css]
 2...
 3abbr[title] {
 4  text-decoration: underline;
 5  text-decoration-style: dotted;
 6  text-decoration-color: hsl(0, 0%, 70%);
 7}
 8
 9[href="https://example.com"] {
10  color: hsl(150, 70%, 40%);
11}

將這些變更儲存到「styles.css」並返回您的瀏覽器以更新「index.html」。僅至「https://example.com」的連結變更為綠色,而頁面上的另一個連結仍然是默認藍色。下面的圖像顯示了瀏覽器的顯示方式:

Link text in green color with underline.

接下来,回到文本编辑器中的styles.css并使用:hover伪选择器添加一个自定义的浮动状态。选择器与之前的选择器相同设置,然后立即跟随关闭的方块带有:hover。

请参考以下代码块中的突出代码,了解如何在您的代码中格式化此代码:

1[label styles.css]
2...
3[href="https://example.com"] {
4  color: hsl(150, 70%, 40%); 
5}
6
7[href="https://example.com"]:hover {
8  color: hsl(150, 70%, 20%);
9}

将您的更改保存到 tyles.css,然后在您的浏览器中重新加载 index.html。向 https://example.com` 的链接现在有一个浮动状态,将其切换到更深的绿色,如下动画所示:

Animation of green text link with underline changing to dark green when cursor hovers text.

属性选择器有额外的条件修改器来搜索值字符串中的特定场景。属性可以搜索的这些条件之一是,如果一个值从一个特定的字符串开始,则由属性名称和等符号之间的^符号表示。

回到文本编辑器中的styles.css并添加一个属性选择器,通过使用[href^="https://"]来寻找以安全 URL 开始的值。此选择器只会匹配具有href元素的元素。然后,若要添加链接是安全的视觉指标,请通过添加::before直接在关闭栏后添加一个伪元素选择器。最后,::before伪元素选择器需要使用一个内容属性,该属性会在 HTML 元素的内容之前添加一个字符串。对于这个内容属性的值,请使用锁定情感符号的唯一标识符,即1F512。

以下代码块的突出部分展示了这个语法:

1[label styles.css]
2...
3
4[href^="https://"]::before {
5  content: '\1F512';
6}

将您的更改保存到styles.css,然后返回您的网页浏览器以重新加载index.html。内容中的两个链接都具有安全链接,现在被标记为锁定情感符,如下图所示:

Links in two different styles with lock emoji preceding the link text.

在本节中,您使用了属性选择器的先进功能来搜索 HTML 属性值中的特定字符串。对于属性值场景,有更多的选项可用,而不是这里所涵盖的选项。

结论

在本教程中,您了解如何以及何时使用id选择器,如何在多个组合中使用和重复使用class选择器,以及如何使用属性选择器及其一些功能来创建非常具体的场景,在其中添加风格。

如果您想阅读更多 CSS 教程,请尝试 How To Style HTML with CSS series中的其他教程。