作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。
介绍
编写 CSS 选择器通常涉及设置条件并在 HTML 中找到满足该条件的元素为真。 您可以使用 元素选择器 广泛地执行此操作来选择高级标签，但要获得对所选元素的更多控制，您可以在 HTML 中创建特定标识符并在 CSS 中应用它们。
在本教程中，您将使用 id、class 和属性选择器将样式范围限定为有意编写的 HTML。 您将首先创建一个 HTML 和一个 CSS 文件，您将在整个教程中对其进行编辑。 然后，您将添加 id 属性并使用这些 id 值来定位样式。 您还将向元素添加 class 属性，并独立使用这些类值并一起创建更具体和可重用的样式。 最后，您将使用属性选择器创建与 id 或 class 选择器单独可以完成的更具体场景匹配的样式。
先决条件
- 了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
- 类型选择器、组合选择器和选择器组的知识，您可以在 如何选择 HTML 元素以使用 CSS 设置样式 中找到这些知识。
- 在您的本地计算机上保存为
index.html的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。 要开始使用，请查看我们的 如何设置您的 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 获取有关如何在浏览器中查看 HTML 的说明。 如果您是 HTML 新手，请尝试整个 如何用 HTML 构建网站系列。
设置基本 HTML 和 CSS
要开始使用 id、class 和属性选择器，您将首先设置您将在本教程的其余部分中使用的 HTML 和 CSS 代码。 在本节中，您将编写所有必要的 HTML 和一些初始 CSS 样式，这些样式将处理布局并开始视觉美感。
首先，在文本编辑器中打开 index.html。 然后，将以下 HTML 添加到文件中：
索引.html
<!doctype html> <html> <head> </head> <body> </body> </html>
接下来，转到 <head> 标记并添加 <meta> 标记以定义 HTML 文件的字符集。 然后添加一个 <meta> 标签，定义移动设备应如何呈现页面，设置页面标题，最后加载您稍后将使用 <link> 标签制作的 CSS 文件。
这些添加在以下代码块中突出显示。 随着代码的添加和更改，您将在整个教程中遇到这种突出显示方法：
索引.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About CSS Selectors</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
添加 <head> 内容后，移动到 <body> 元素，您将在其中为讨论 CSS 选择器的页面添加内容。 将此代码块中突出显示的部分添加到文本编辑器中的 index.html 文件中：
索引.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Link and Buttons with State</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Using CSS Selectors</h1>
</header>
<main>
<section>
<h2>Selecting HTML To Style</h2>
<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>
<p><a href="https://example.com">Read this to learn more about selectors</a></p>
</section>
<section>
<h2>The Type Selector</h2>
<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>
</section>
<section>
<h2>Combining Selectors</h2>
<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>
</section>
</main>
</body>
</html>
将更改保存到 index.html 并在文本编辑器中保持打开状态。 打开浏览器并加载 index.html 以使用浏览器默认样式呈现页面内容。 下图显示了这些默认样式，白色背景上带有黑色衬线文本：
接下来，返回文本编辑器并创建一个名为 styles.css 的文件。 这是您在 index.html 中的 <head> 元素中引用的文件。 在 styles.css 文件中，添加以下代码：
样式.css
body {
font-family: sans-serif;
line-height: 1.5;
color: #444;
}
此 CSS 使用 body 类型选择器将页面的默认 font-family 设置为浏览器的 sans-serif 字体。 然后它将文本行之间的间距更改为 font-size 的 1.5 倍。 最后，color 值将文本更改为深灰色，而不是默认的黑色。
将这些更改保存到 styles.css 并返回浏览器查看这些更改将如何显示，如下图所示：
您现在已经为 index.html 和 styles.css 设置了起点。 在下一节中，您将向 HTML 中的元素添加 id 属性，并在 CSS 中创建 id 选择器以将样式应用于这些元素。
使用 ID 选择器
在本节中，您将了解 id 属性及其用途，然后将几个 id 属性添加到您的 HTML。 最后，您将使用其中一些 id 选择器来应用布局样式。
id 属性是将页面上的内容链接在一起的唯一标识符。 例如，假设有一个元素位于网页内容的中间，其 id 属性为 my-id。 通过将带有井号或井号 (#) 的 id 值附加到 URL，例如 http://example.com/index.html#my-id，浏览器将滚动到页面的该部分。 由于这可以用作 URL 的一部分并用于其他脚本目的，因此页面上的每个 id 值必须是唯一的。
要开始使用 id 属性，请在文本编辑器中打开 index.html。 首先，找到 <header> 元素并为其赋予 id 属性，其值为 header。 接下来，移动到 <main> 元素并为其赋予 id 属性，其值为 content。 这些 id 属性为内容的两个主要部分提供了唯一标识符。 以下代码块中突出显示的添加显示了您将对 index.html 文件所做的更改：
索引.html
... <header id="header"> ... </header> <main id="content"> ... </main> ...
请注意，编写良好的 HTML 将只有一个 <header> 元素和一个 <main> 元素，因此为已经唯一的元素分配唯一 ID 似乎是多余的。 但是，像这样应用特定的 ID 可以将您的样式与 HTML 结构分开，即使基础 HTML 发生变化，您也可以保持与 ID 关联的一致样式。
在继续之前，请务必将您的更改保存到 index.html。
CSS 中的 id 选择器使用与在 URL 中引用时相同的格式：井号后跟 id 的名称，例如 #my-id。 要开始使用 id 选择器，请在文本编辑器中打开 styles.css。 然后，将 index.html 中的两个 id 属性值添加为 组组合符 #header, #content。 您将使用此选择器将 <header> 和 <main> 元素的内容统一设置在页面中间。 以下代码块具有选择器块和此布局所需的代码：
样式.css
body {
font-family: sans-serif;
line-height: 1.5;
color: #444;
}
#header,
#content {
margin: 1em auto;
width: 90%;
max-width: 60ch;
}
id 选择器会将 1em 的 margin 应用到 <header> 和 <main> 元素的顶部和底部。 当与 90% 的 width 属性配对时，margin 属性上的 auto 值使内容保持在页面中心。 最后，max-width 属性会阻止两个容器在达到 60ch 的大小后变得更宽，这相当于 60 个 0 字符的宽度。
将更改保存到 styles.css，然后在浏览器中打开 index.html。 页面的内容现在以页面为中心，而不是在窗口的长度上延伸。 下图说明了它在浏览器中的显示方式：
在本节中，您了解了 id 属性并使用此属性将样式应用于元素。 您还了解到 id 属性必须具有唯一值，因为浏览器如何在 URL 和脚本中使用它。 接下来，您将使用 class 属性重构本节中的代码，以将颜色应用于具有新类的内容。
使用类选择器
在本节中，您将使用 class 选择器使用 class HTML 属性中的值查找页面上的特定元素。 您将重构 id 选择器以使用可重用的 class 代替。 class 属性旨在创建可以应用样式的特定目标值。 与 id 不同的是，class 属性的值可以重复使用，这是它优于 id 选择器的优势。
要使用 class 开始设置元素样式，首先在文本编辑器中打开 index.html 文件。 在 <header> 和 <main> 元素上，添加一个值为 content-width 的 class 属性。 以下代码块的突出显示部分指示如何添加 class 属性：
索引.html
... <header id="header" class="content-width"> ... </header> <main id="content" class="content-width"> ... </main> ...
保存对 index.html 的更改，然后在您的文本编辑器中打开 styles.css 为此类值创建类选择器。
class 选择器与 id 相似之处在于它在 CSS 中具有一个特殊字符，由句点符号 (.) 表示。 在 styles.css 文件中，找到 ID 为 #header, #content 的选择器，并将两个选择器替换为 .content-width 类选择器。 以下突出显示的代码表示您将在代码中进行的更改：
样式.css
body {
font-family: sans-serif;
line-height: 1.5;
color: #444;
}
.content-width {
margin: 1em auto;
width: 90%;
max-width: 60ch;
}
将这些更改保存到您的 styles.css 并返回到您的浏览器。 刷新index.html，样式不变。 对代码的重构并没有改变样式，但确实改变了元素的选择方式。 class 的多功能性在于样式可以在不同的元素类型上多次使用。
接下来，在您的文本编辑器中返回 index.html 并向 <h1> 元素添加一个 class 属性，其值为 style-1。 这定义了将在您的 CSS 中使用的类名。 以下代码块在突出显示的部分中指示了此更改：
索引.html
... <header id="header" class="content-width"> <h1 class="style-1">Using CSS Selectors</h1> </header> ...
接下来，在 <main> 元素内的每个 <h2> 元素上，添加一个 class 属性。 将 style-2 的值赋予所有这三个 class 属性。 使用以下代码块的突出显示部分作为参考：
索引.html
...
<main id="content" class="content-width">
<section>
<h2 class="style-2">Selecting HTML To Style</h2>
...
</section>
<section>
<h2 class="style-2">The Type Selector</h2>
...
</section>
<section>
<h2 class="style-2">Combining Selectors</h2>
...
</section>
</main>
...
将 class 属性添加到 index.html 文件中的元素后，请务必保存更改。 然后，在您的文本编辑器中打开 styles.css 并为 style-1 类创建一个类选择器。
在 styles.css 的末尾添加一个名为 .style-1 的选择器。 句点告诉浏览器在页面上查找名称为 style-1 的类属性。 然后创建一个选择器块并添加一个值为 1.25rem 的 font-size 属性、一个设置为 uppercase 的 text-transform 属性和一个 [X134X ] 属性在字符之间放置 0.125em 空格。 以下代码块在突出显示的部分中指示了这些添加：
样式.css
...
.content-width {
margin: 1em auto;
width: 90%;
max-width: 60ch;
}
.style-1 {
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.125em;
}
接下来，创建另一个类选择器，这次是为 style-2 类。 请务必在类值名称之前添加句点。 然后将 font-size 属性添加到该选择器，其中 2rem 值和 font-weight 属性设置为 normal。 引用以下代码块中突出显示的代码：
样式.css
...
.style-1 {
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.125em;
}
.style-2 {
font-size: 2rem;
font-weight: normal;
}
保存对 styles.css 的更改并在浏览器中刷新 index.html 文件。 <h1> 内容现在将变小并大写，而 <h2> 内容将稍大一点并且不再粗体。 以下屏幕截图展示了这些更改将如何出现在浏览器中：
类是一个强大的选择器，因为它们可以被重用并应用于页面上的任何元素。 这意味着您可以交换使用 style-1 和 style-2 类的位置和方式，并且无需对 CSS 进行任何更改。
要进行此更改，请打开 index.html 并将 <h1> 元素上的 class 属性值 style-1 更改为 style-2。 之后，将 <h2> 元素的 class 属性上的 style-2 值更改为 style-1。 请参考以下代码块中突出显示的部分以了解这些更改：
索引.html
...
<header id="header" class="content-width">
<h1 class="style-2">Using CSS Selectors</h1>
</header>
<main id="content" class="content-width">
<section>
<h2 class="style-1">Selecting HTML To Style</h2>
...
</section>
<section>
<h2 class="style-1">The Type Selector</h2>
...
</section>
<section>
<h2 class="style-1">Combining Selectors</h2>
...
</section>
</main>
...
将这些更改保存到 styles.css，返回浏览器，然后重新加载 index.html。 style-2 的大、正常字体粗细现在应用于 <h1> 元素中的内容，而 style-1 的较短的大写样式现在应用于 <h2> 元素。 下图显示了它在浏览器中的显示方式：
在本节中，您使用 class 选择器重构了上一节中的 id 选择器。 您还创建了两个新的 class 选择器以将字体样式应用于 <h1> 和 <h2> 标题元素，并交换了这些 class 属性值以更改接收的元素什么风格。 在接下来的部分中，您将通过将多个类应用于 HTML 元素来继续使用类选择器。
组合类选择器
在本节中，您将对同一个 HTML 元素应用多个 class 值，以组合来自多个 CSS class 选择器的样式。 class 相对于 id 的优势在于它的可重用性，如上一节所示。 class 选择器也可以组合起来以定位更具体的元素。 class 选择器是最常见和首选的 CSS 选择器，因为它在查找元素和应用样式方面具有多功能性和特殊性。
首先，在文本编辑器中打开 styles.css 文件。 然后添加三个新的类选择器：.color-1、.color-2 和 .color-3。 这三个选择器中的每一个都将具有 color 属性，该属性具有相似的 HSL 值，在色调光谱上相差 50 的增量。 这将提供一个调色板，您可以将其应用于 HTML 中的元素。 有关要添加到 CSS 文件的内容，请参阅以下代码块的突出显示部分：
样式.css
...
.style-2 {
font-size: 2rem;
font-weight: normal;
}
.color-1 {
color: hsl(300, 70%, 40%);
}
.color-2 {
color: hsl(250, 70%, 40%);
}
.color-3 {
color: hsl(200, 70%, 40%);
}
将更改保存到 styles.css，然后在文本编辑器中打开 index.html。 您现在将为 <main> 块中的三个 <h2> 元素中的每一个添加颜色。 对于第一个 <h2>，在 style-1 之后添加一个空格，然后添加 color-1。 class 属性中每个值之间的空格表示可以从 CSS 引用的附加 class 名称。 对其他 <h2> 元素执行相同的操作，除了对第二个 <h2> 使用 color-2 值，对第三个 <h2> 使用 color-3 值。
以下代码块的突出显示部分显示了如何格式化附加类值：
索引.html
...
<main id="content" class="content-width">
<section>
<h2 class="style-1 color-1">Selecting HTML To Style</h2>
...
</section>
<section>
<h2 class="style-1 color-2">The Type Selector</h2>
...
</section>
<section>
<h2 class="style-1 color-3">Combining Selectors</h2>
...
</section>
</main>
...
保存对 index.html 的更改，返回浏览器并刷新页面。 三个 <h2> 部分标题保留相同的字体样式，但现在每个都有不同的颜色。 下图显示了它在浏览器中的显示方式：
正如 class 值可以在 HTML 中一起使用，class 名称也可以组合起来以创建可能出现在 HTML 中的更具体的情况。 通过将 CSS 中的类名链接在一起，您可以选择同时具有这两个类的元素。
例如，CSS 选择器 .color-1.color-2 只会选择 HTML class 值同时包含 color-1 和 color-2 的元素。
要尝试在选择器中使用多个 class 名称，请在文本编辑器中打开 styles.css。 创建一个结合了 color-1 类和 color-2 类的新选择器。 这种组合的目的是应用介于这些类中的每一个的定义的 color 值之间的颜色。
将以下突出显示的部分添加到您的 CSS 文件中：
样式.css
...
.color-3 {
color: hsl(200, 70%, 40%);
}
.color-1.color-2 {
color: hsl(275, 70%, 40%);
}
.color-2.color-3 {
color: hsl(225, 70%, 40%);
}
在此代码块中，您将组合类选择器 .color1.color-2 的 color 属性设置为 hsl(275, 70%, 40%)，因为它介于 .color-1 的 300 值和.color-2 的 250 值。 然后你做了同样的事情来组合 .color-2 和 .color-3。
请务必将更改保存到 styles.css，然后在文本编辑器中移动到 index.html 并在以下代码块中进行突出显示的更改：
索引.html
...
<main id="content" class="content-width">
<section>
<h2 class="style-1 color-1 color-2">Selecting HTML To Style</h2>
...
</section>
...
<section>
<h2 class="style-1 color-3 color-2">Combining Selectors</h2>
...
</section>
</main>
...
请注意，您为组合类选择器声明的新样式将优先于为每个单独类设置的样式。 这是因为组合类选择器选择的元素比单个类选择器更具体。 例如，您为 .color-1 编写的规则正在寻找一个将 color-1 作为其类之一的 HTML 元素。 .color-1.color-2 规则正在寻找在其类列表中同时具有 color-1 和 color-2 的 HTML 元素。 由于第二条规则是第一条的子集，因此可以说它更具体，因此覆盖了第一条。
使用您编写的两个组合类 CSS 规则，在某些情况下两个规则都可以应用。 例如，class 值为 color-1 color-2 color-3 的 HTML 元素将同时满足 .color-1.color-2 和 .color-2.color-3 规则。 在这种情况下，由于它们都具有相同的特异性，级联将生效，并且最后声明的规则将覆盖样式。 在这种情况下，.color-2.color-3 将应用其样式，因为它是声明的最终规则。
保存对 index.html 的更改，然后在浏览器中刷新页面。 所有三个 <h2> 元素的颜色仍将是不同的，但现在在色调上会更加接近。
以下屏幕截图显示了它在浏览器中的显示方式：
本节向您介绍了一种将 class 值串在一起以创建应用样式的更具体场景的方法。 在下一节中，您将学习如何根据任何属性类型在页面上查找元素。
使用属性选择器
在本节中，您将使用属性选择器来查找和选择元素。 在前面的部分中，您已经了解到 id 和 class 选择器有一个符号，表示要定位的属性类型，后跟要选择的值。 属性选择器的格式由用一对方括号括起来的属性名称组成，例如：[attr]。 属性选择器可以与任何属性一起使用，包括 id 和 class。
要开始使用属性选择器，请在文本编辑器中打开 index.html 文件。 您将为缩写添加 HTML 元素，<abbr>，作为属性选择器有益的情况。 将 <abbr> 放置在 <h1> 元素中 CSS 的第一个实例周围。 然后，在第一个 <h2> 元素中的第一个 HTML 实例周围放置另一个 <abbr>。 对于 HTML <abbr>，添加一个值为 Hypertext Markup Language 的 title 属性。 参考以下代码块了解如何格式化：
索引.html
... <h1 class="style-2">Using <abbr>CSS</abbr> Selectors</h1> ... <h2 class="style-1 color-1 color-2">Selecting <abbr title="Hypertext Markup Language">HTML</abbr> To Style</h2> ...
将更改保存到 index.html，然后返回浏览器加载文件。 如果您使用 Chrome 或 Firefox，浏览器默认为具有 title 属性的 <abbr> 元素添加虚线下划线。 视觉指示器的目的是让用户将鼠标悬停在文本上，此时将出现缩写的含义，即 title 属性的值。 下图展示了 Firefox 中默认的 <abbr> 样式：
与 Chrome 和 Firefox 不同，某些浏览器，如 Safari 和其他较旧的浏览器，没有指示 <abbr> 元素何时具有 title。 可以将相同的样式引入这些其他浏览器，以及使用属性选择器进行一些自定义。
要开始使用属性选择器进行样式设置，请在文本编辑器中打开 styles.css 文件。 为 [title] 添加一个属性选择器，然后为选择器块添加大括号。 在选择器块中，将 text-decoration 属性设置为 underline。 然后添加值为 dotted 的 text-decoration-style 属性。 这两个属性将均衡浏览器之间的样式。 最后，要为下划线添加自定义外观，添加属性 text-decoration-color 并将其设置为浅灰色，值为 hsl(0, 0%, 70%) 。
请参考以下代码块，了解如何在您的代码中对其进行格式化：
样式.css
...
.color-2.color-3 {
color: hsl(225, 70%, 40%);
}
[title] {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: hsl(0, 0%, 70%);
}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。 HTML 文本的样式现在将具有浅灰色虚线下划线。 下图演示了它在浏览器中的显示方式：
使用 [title] 属性作为选择器的一个问题是它几乎可以用于页面上的任何元素。 这意味着，使用当前选择器，具有 title 属性的 <img> 或 <a> 元素也将接收这些样式。 在这种情况下，选择器需要限定范围以仅与 <abbr> 元素一起使用。
要对选择器进行此调整，请在文本编辑器中返回 styles.css。 在 [title] 属性选择器的左侧，添加 abbr 元素选择器。 确保这些选择器之间没有空格，因为这会告诉浏览器专门查找具有 title 属性的 <abbr> 元素。 以下代码块演示了它的外观，突出显示了添加的元素选择器：
样式.css
...
abbr[title] {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: hsl(0, 0%, 70%);
}
将更改保存到 styles.css。 这些样式现在的范围仅限于具有 title 属性的 <abbr> 元素。 <h1> 元素中的 CSS <abbr> 也不会接收这些样式。 虽然它匹配 abbr 选择器，但它没有 title 属性，因此不匹配。
在本节中，您使用属性选择器将样式限定为 <abbr> 元素，以便在存在 title 属性时应用样式。 在下一节中，您将通过匹配给定属性的值来使用属性选择器的更高级功能。
创建高级属性选择器
属性选择器可用于在 HTML 中查找特定属性并将样式应用于它们。 但是，属性选择器也有几种方法来查找属性的值。 在最后一节中，您将使用属性选择器来查找匹配的值字符串并应用满足这些特定条件的样式。
首先，在文本编辑器中打开您的 styles.css 文件。 在 HTML 中有一个指向网站 https://example.com 的链接； 要定位该特定 URL 链接，请为 href 属性创建一个属性选择器。 然后，在属性名称后面的括号内，添加一个等号，后跟字符串引号。 在这些引号中，添加 https://example.com。 此选择器将定位到指向指定 URL 的链接。 使用 hsl(150, 70%, 40%) 添加具有绿色的 color 属性。
以下代码块中突出显示的代码显示了它在 styles.css 文件中的格式：
样式.css
...
abbr[title] {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: hsl(0, 0%, 70%);
}
[href="https://example.com"] {
color: hsl(150, 70%, 40%);
}
将这些更改保存到 styles.css 并返回浏览器以刷新 index.html。 只有指向 https://example.com 的链接变为绿色，而页面上的其他链接保持默认的蓝色。 下图演示了它在浏览器中的显示方式：
接下来，在文本编辑器中返回 styles.css 并使用 :hover 伪选择器添加自定义悬停状态。 选择器的设置与前一个选择器相同，并紧跟在带有 :hover 的右方括号之后。 然后在选择器中通过将 HSL 的亮度值从 40% 更改为 20% 来添加一个 color 属性，该属性具有先前绿色的深色版本。
参考以下代码块中突出显示的代码，了解如何在代码中设置格式：
样式.css
...
[href="https://example.com"] {
color: hsl(150, 70%, 40%);
}
[href="https://example.com"]:hover {
color: hsl(150, 70%, 20%);
}
保存对 styles.css 的更改，然后在浏览器中重新加载 index.html。 指向 https://example.com 的链接现在具有切换为深绿色的悬停状态，如下面的动画所示：
属性选择器具有额外的条件修饰符来查找值字符串中的特定场景。 属性可以查找的这些条件之一是值是否以给定字符串开头。 这由属性名称和等号之间的 ^ 符号表示。 这种方法可用于突出显示安全链接，这意味着它们会转到以 https:// 而不是 http:// 开头的 URL。
返回文本编辑器中的 styles.css 并添加一个属性选择器，该选择器使用 [href^="https://%22] 查找以安全 URL 开头的值。 此选择器将仅匹配具有以 https:// 开头的 href 元素的元素。 然后，要添加链接安全的视觉指示器，请使用伪元素选择器，方法是在右括号后立即添加 ::before。 最后，::before 伪元素选择器需要使用 content 属性，它将在 HTML 元素的内容之前添加一个字符串。 对于此 content 属性的值，请使用锁表情符号的 Unicode 标识符 \1F512。
以下代码块的突出显示部分演示了此语法：
样式.css
...
[href^="https://"]::before {
content: '\1F512';
}
将您的更改保存到 styles.css 并返回到 Web 浏览器以重新加载 index.html。 内容中的两个链接都有安全链接，现在用锁表情符号表示，如下图所示：
在本节中，您使用了属性选择器的高级功能来查找 HTML 属性值中的特定字符串。 可用于属性值方案的选项比此处介绍的要多。 如果您想了解有关不同属性选择器选项的更多信息，请阅读 Chris Coyier 的 The Skinny on CSS 属性选择器 。
结论
编写特定且可重用的样式是有效 CSS 架构的基石。 在本教程中，您了解了如何以及何时使用 id 选择器，如何在多种组合中使用和重用 class 选择器，以及如何使用属性选择器及其一些功能创建非常具体的场景来添加样式。 这些选择器是一种强大的资产，可以创建为网站带来活力和功能的样式。
如果您想阅读更多 CSS 教程，请尝试 如何使用 CSS 设置 HTML 样式系列 中的其他教程。
