作为Write for DOnations计划的一部分，作者选择了科技多样性基金来接受捐赠。
简介
编写CSS选择器最常见的是设置一个条件，并在HTML中找到满足该条件的元素为真。你可以用元素选择器来选择高级标签，但要想对所选元素获得更多的控制，你可以在HTML中创建特定的标识符，并在CSS中应用它们。
在本教程中，你将使用id 、class 、和属性选择器来为有意编写的HTML确定样式范围。你将首先创建一个HTML和一个CSS文件，你将在整个教程中进行编辑。然后你将添加id 属性，并使用这些id 值来定位样式。你还将为元素添加class 属性，并独立或共同使用这些类值来创建更具体和可重复使用的样式。最后，你将使用属性选择器来创建符合更多特定情况的样式，这比单独使用id 或class 选择器要好得多。
前提条件
- 对CSS的级联和特性的理解，你可以通过阅读《如何用级联和特性将CSS样式应用于HTML》来获得。
- 对类型选择器、组合选择器和选择器组的了解，你可以在《如何用CSS选择HTML元素的样式》中找到。
- 在你的本地机器上保存一个空的HTML文件，即
index.html，你可以从你选择的文本编辑器和网络浏览器中访问。要开始学习，请查看我们的《如何设置你的HTML项目》教程，并按照《如何使用和理解HTML元素》中的说明，在浏览器中查看你的HTML。如果你是HTML的新手，可以试试整个《如何用HTML建立网站》系列。
设置基础HTML和CSS
要开始使用id 、class 、和属性选择器，你将首先设置HTML和CSS代码，你将在本教程的其余部分进行操作。在本节中，你将写出所有必要的HTML和一些初始的CSS样式，它们将处理布局并开始视觉美学。
要开始，在你的文本编辑器中打开index.html 。然后，在该文件中添加以下HTML。
index.html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
复制代码接下来，到<head> 标签，添加一个<meta> 标签，以定义HTML文件的字符集。然后添加一个<meta> 标签，定义移动设备应该如何渲染页面，设置页面的标题，最后用<link> 标签加载你稍后要做的CSS文件。
这些添加的内容在下面的代码块中被突出显示。在整个教程中，随着代码的添加和修改，你会遇到这种突出显示的方法。
index.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 文件中。
index.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 文件中，添加以下代码。
styles.css
body {
font-family: sans-serif;
line-height: 1.5;
color: #444;
}
复制代码这个CSS使用一个body 类型选择器，将页面的默认font-family 设为浏览器的sans-serif 字体。然后，它将文本行间的间距改为1.5倍的font-size 。最后，color 值将文本改为深灰色，而不是默认的黑色。
将这些变化保存到styles.css ，然后返回浏览器，看看这些变化将如何出现，如下图所示。
现在你已经为你的index.html 和styles.css 设置了起点。在下一节中，你将为HTML中的元素添加一个id 属性，并在CSS中创建id 选择器来为这些元素应用样式。
使用ID选择器
在这一节中，你将了解id 属性和它的用途，然后在你的HTML中添加几个id 属性。最后，你将使用其中一些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 文件进行的修改。
index.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> 元素的内容统一设置在页面的中间。下面的代码块有选择器块和这个布局所需的代码。
styles.css
body {
font-family: sans-serif;
line-height: 1.5;
color: #444;
}
#header,
#content {
margin: 1em auto;
width: 90%;
max-width: 60ch;
}
复制代码id 选择器将在<header> 和<main> 元素的顶部和底部应用margin 的1em 。margin 属性上的auto 值在与width 属性的90% 配套使用时，会使内容保持在页面的中心位置。最后，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 属性。
index.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 类选择器替换这两个选择器。下面突出显示的代码表示你将在代码中做出的改变。
styles.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中使用的类名。下面的代码块在高亮部分显示了这一变化。
index.html
...
<header id="header" class="content-width">
<h1 class="style-1">Using CSS Selectors</h1>
</header>
...
复制代码接下来，在<main> 元素内的每个<h2> 元素上，添加一个class 属性。给所有这三个class 属性的值为style-2 。使用以下代码块的高亮部分作为参考。
index.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>
...
复制代码在为index.html 文件中的元素添加了class 属性后，一定要保存这些更改。然后，在你的文本编辑器中打开styles.css ，为style-1 类创建一个类选择器。
在styles.css 的末尾添加一个叫做.style-1 的选择器。这个句号告诉浏览器在页面上寻找一个名字为style-1 的类属性。然后创建一个选择器块，并添加一个值为1.25rem 的font-size 属性，一个设置为uppercase 的text-transform 属性，以及一个letter-spacing 属性，以便在字符之间加上0.125em 的空格。下面的代码块在高亮部分显示了这些添加内容。
styles.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 。在下面的代码块中引用突出显示的代码。
styles.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 。style-2 之后，将<h2> 元素上的class 属性值改为style-1 。请参考以下代码块中的高亮部分来进行这些修改。
index.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 ，以结合多个CSSclass 选择器的样式。与id 相比，class 的优势在于它的可重用性，如上一节所示。class 选择器也可以被组合，以针对更多的特定元素。class 选择器是最常见和最受欢迎的CSS选择器，因为它在寻找元素和应用样式方面具有多功能性和特殊性。
首先，在文本编辑器中打开你的styles.css 文件。然后添加三个新的类选择器。.color-1,.color-2, 和.color-3 。这三个选择器中的每一个都将有一个color 属性，其数值与HSL 相似，在色调谱上的增量为50。这将提供一个调色板，你可以应用于HTML中的元素。请看以下代码块的高亮部分，以了解要添加到你的CSS文件中的内容。
styles.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 属性中每个值之间的空格表示一个额外的class 名称，可以从CSS中引用。对其他的<h2> 元素做同样的处理，除了对第二个<h2> 使用color-2 值，对第三个<h2> 使用color-3 。
以下代码块的高亮部分显示了如何格式化额外的类值。
index.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 将只选择那些具有同时包含color-1 和color-2 的HTMLclass 值的元素。
要尝试在一个选择器中使用多个class 名称，请在文本编辑器中打开styles.css 。创建一个新的选择器，结合color-1 类和color-2 类。这种组合的目的是应用一种颜色，它介于这些类的定义color 值之间。
在你的CSS文件中添加以下高亮部分。
styles.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 ，并在下面的代码块中做高亮修改。
index.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 所写的规则是在寻找一个HTML元素，它的类之一是color-1 。.color-1.color-2 规则是在寻找一个在其类列表中同时有color-1 和color-2 的HTML元素。由于第二条规则是第一条规则的子集，它可以说是更具体的，因此覆盖了第一条规则。
对于你写的这两条组合类CSS规则，在某些情况下，两条规则都可以适用。例如，一个HTML元素的class ，其值为color-1 color-2 color-3 ，将同时满足.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> ，添加一个属性title ，其值为Hypertext Markup Language 。请参考下面的代码块，看看这将是怎样的格式。
index.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 。然后添加text-decoration-style 属性，其值为dotted 。这两个属性将在不同的浏览器中实现风格的统一。最后，为了给下划线添加一个自定义的外观，添加属性text-decoration-color ，并将其设置为浅灰色，值为hsl(0, 0%, 70%) 。
参考下面的代码块，了解如何在你的代码中进行格式化。
styles.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> 元素。下面的代码块演示了这样的效果，添加的元素选择器被突出显示。
styles.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 文件中的格式。
styles.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 。然后在选择器中添加一个color 属性，通过将HSL 的亮度值从40% 改为20% ，使其成为之前绿色的暗淡版本。
参考下面代码块中的高亮代码，了解如何在你的代码中格式化它。
styles.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:// 开始的URL，而不是http:// 。
在你的文本编辑器中返回到styles.css ，并添加一个属性选择器，通过使用[href^="https://"] ，寻找以安全URL开头的值。这个选择器将只匹配那些有一个以https:// 开始的href 元素的元素。然后，为了增加一个链接是安全的视觉指示器，使用一个伪元素选择器，在紧接着闭合括号的地方添加::before 。最后，::before 伪元素选择器需要使用一个content 属性，它将在HTML元素的内容之前添加一个字符串。对于这个content 属性的值，使用锁形表情符号的unicode标识符，\1F512 。
以下代码块的高亮部分演示了这种语法。
styles.css
...
[href^="https://"]::before {
content: '\1F512';
}
复制代码保存你对styles.css 的修改，并返回你的网络浏览器重新加载index.html 。内容中的两个链接都有安全链接，现在都用锁的表情符号表示，如下图所示。
在本节中，你使用了属性选择器的高级功能来寻找HTML属性值中的特定字符串。对于属性值的情况，还有更多的选项可供选择，而不是这里所涉及的。如果你想进一步了解不同的属性选择器选项，请阅读Chris Coyier写的《The Skinny on CSS Attribute Selectors》。
总结
编写特定的、可重复使用的样式是有效的CSS架构的基石。在本教程中，你学到了如何以及何时使用id 选择器，如何在多种组合中使用和重用class 选择器，以及如何使用属性选择器和它的一些功能来创建非常具体的场景，在其中添加样式。这些选择器是一种强大的资产，可以创建给网站带来活力和功能的样式。
如果你想阅读更多的CSS教程，可以试试《如何用CSS为HTML设计样式》系列中的其他教程。
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
