您是 CSS 新手吗？这篇文章适合您！也许理解 CSS 最大的关键在于理解选择器。选择器使您能够定位特定的 HTML 元素并对其应用样式。不过，现在先不要考虑样式，让我们只关注选择。
在下面的示例中，CSS 将位于一个名为 style.css 的文件中，该文件从一个名为 index.html 的 HTML 文档中引用。它们是单独的文件，这是 CSS 的优点，它将设计与文档分开。
HTML 文件将如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>CSS 文件将只包含如下所示的选择器块。
ID 选择器
#happy-cake {
}<!-- WILL match -->
<div id="happy-cake"></div>
<!-- WILL match -->
<aside id="happy-cake"></aside>
<!-- Will NOT match -->
<div id="sad-cake">Wrong ID!</div>
<!-- Will NOT match -->
<div class="happy-cake">That's not an ID!</div>提升水平
就CSS 特异性而言，ID 选择器是最强大的选择器类型。这意味着它们胜过其他类型的选择器，并且其中定义的样式获胜。这听起来不错，但这通常被认为是不好的，因为拥有较低特异性的选择器在需要时更容易覆盖是很好的。
类选择器
.module {
}<!-- WILL match -->
<div class="module"></div>
<!-- WILL match -->
<aside class="country module iceland"></aside>
<!-- Will NOT match -->
<div class=".module">The dot is for CSS, not HTML</div>
<!-- Will NOT match -->
<div class="bigmodule">Wrong class</div>提升水平
类选择器是您的朋友。它们可能是最有用和用途最广泛的选择器。部分原因在于它们在所有浏览器中都得到了很好的支持。部分原因在于您可以在 HTML 元素上添加多个类（只需用空格分隔）。部分原因在于您可以执行一些特定于操作类的 JavaScript 操作。
标签选择器
h2 {
}<!-- WILL match -->
<h2>Hi, Mom</h2>
<main>
<div>
<!-- WILL match -->
<h2>Anywhere</h2>
</div>
</main>
<!-- Will NOT match -->
<div class="h2">Wrong tag, can't trick it</div>
<!-- Will NOT match -->
<h2class="yolo">Make sure that tag has a space after it!</h2>提升水平
当更改特定于该 HTML 元素的属性时，标签选择器最有用。例如，在<ul>上设置list-style或在<pre>上设置tab-size。还在重置样式表中，您专门尝试取消浏览器应用于某些元素的样式。
不过，不要过分依赖它们。通常，使用类定义可以在任何 HTML 元素上使用的样式更有用。
属性选择器
[data-modal="open"] {
}<!-- WILL match -->
<div data-modal="open"></div>
<!-- WILL match -->
<aside class='closed' data-modal='open'></aside>
<!-- Will NOT match -->
<div data-modal="false">Wrong value</div>
<!-- Will NOT match -->
<div data-modal>No value</div>
<!-- Will NOT match -->
<div data-modal-open>Wrong attribute</div>提升水平
您可能会认为属性选择器甚至比类更有用，因为它们具有相同的特异性值，但可以是任何属性，而不仅仅是class，此外，它们还可以具有您可以通过其选择的值。
现在几乎不是问题，但属性选择器在 IE 6 中不受支持。
位置选择器
:nth-child(2) {
}<ul>
<li>nope</li>
<!-- WILL match -->
<li>yep, I'm #2</li>
<li>nope</li>
</ul>提升水平
除了:nth-child之外，还有几种不同的位置选择器。使用简单的表达式（例如3n =“每三个”），您可以根据元素在 HTML 中的位置来选择元素。您可以在这里尝试这个想法或查看一些有用的示例。
其他伪类选择器
:empty {
}<!-- WILL match -->
<div></div>
<!-- WILL match -->
<aside data-blah><!-- nothin' --></aside>
<!-- Will NOT match -->
<div> </div>
<!-- Will NOT match -->
<div>
</div>提升水平
:empty是许多伪类选择器之一，您可以通过其中的冒号(:)来识别它们。它们通常表示一些您仅通过元素和属性无法知道的内容。
请注意，这些与伪元素略有不同，您可以通过双冒号(::)来识别它们。它们负责通过它们选择的内容向页面添加内容。
更多提升水平
选择器可以组合在一起。例如
.module.news {
/* Selects elements with BOTH of those classes */
}
#site-footer::after {
/* Adds content after an element with that ID */
}
section[data-open] {
/* Selects only section elements if they have this attribute */
}还有选择器组合器，如~和+和>，它们会影响选择器，例如
.module > h2 {
/* Select h2 elements that are direct children of an element with that class */
}
h2 + p {
/* Select p elements that are directly following an h2 element */
}
li ~ li {
/* Select li elements that are siblings (and following) another li element. */
}在 CSS-Tricks 上，有一个完整的年鉴，涵盖了 CSS 中的所有选择器以及属性。
对于“属性选择器”，CSS 是否应该读取
[data-modal="true"]？那里有一个错字！感谢 Phan 指出。由于它不再相关，因此将将其隐藏。
IE 不识别双冒号，对吧？必须使用单冒号语法。
对于 IE 8 来说确实如此。不过，我认为用不同数量的冒号来呈现选择器和元素之间的区别的概念很好。在初学者文章中，总是需要谨慎选择要涵盖的内容和不涵盖的内容，以免造成过多的负担。
Chris 写得非常好。
您应该注意，每个页面只能使用一次 ID，因为很多初学者不知道这一点 :)
*相同的 ID
奇怪的是，虽然这绝对是最佳实践，但 CSS 并不真正关心这一点。
为什么它应该关心？拥有唯一的 ID 是对 HTML 文档的限制，而不是对 CSS 的限制。
这就是我的意思。我知道 CSS 不在乎，这都没问题。
ID 的名称在 HTML 文档中应该唯一。
这可能会让初学者感到困惑。
如果同一页面中存在这种情况，验证器将抛出错误。但这没什么大不了的 :)
这就是我的意思。我知道 CSS 不在乎，这都没问题。
ID 的名称在 HTML 文档中应该唯一。
这可能会让初学者感到困惑。
如果同一页面中存在这种情况，验证器将抛出错误。但这没什么大不了的 :)
操，对不住了，Chris。
我的意思是 ID happy-cake
CSS 不在乎多个相同的 ID，但 JavaScript 在乎（JavaScript 将聚焦流程中的最后一个）。
因此，禁止使用多个相同的 ID。
那个 :empty 选择器……#震惊
我也这么认为。我对伪类选择器/伪元素很熟悉，但我甚至不知道这个！
：empty 选择器很好用，但需要注意的是，空白字符可能会/应该在 DOM 中被渲染为文本节点。一旦某个元素中存在文本节点，该元素的 :empty 属性就会变为 false。
这种行为在不同的浏览器之间有所差异（可能也取决于元素类型），上次我检查的时候是这样的。
我不想依赖这个选择器，因为它在编写 HTML 时太隐蔽了，很容易不小心多加一个换行符。
在 CSS Tricks 的选择器手册中也有提到：https://css-tricks.org.cn/almanac/selectors/e/empty/
感谢 Chris 创建一篇面向 CSS 初学者开发者的文章……我教授 CSS，CSS 中的一些概念，有些博主认为理所当然，对于刚开始学习 CSS 的新手来说却是完全陌生的……像这样的文章确实很有帮助……
感谢分享你的知识……
虽然我本人不是 CSS 初学者，但这篇文章对选择器的使用进行了全面概述。这是一个很好的链接，可以传递给一些我认识正在学习这些东西的人。一如既往，感谢 Chris！
我也会分享给我的新学生……谢谢 Chris
简洁明了 :)
这是一个练习的好“游戏”：http://flukeout.github.io/！
你需要选择那个晃动的项目。开始时，在闪烁的蓝色字段中输入的前三个答案是
plate
bento
plate#fancy
祝初学者们玩得开心！
这完美地体现了我对 CSS 的顿悟时刻。可能看起来很奇怪，但意识到“选择器”实际上意味着你正在“选择”某些东西，这对我理解 CSS 的工作原理是一个巨大的进步。
这还用说吗？它还能怎么工作？
感谢这篇文章。我之前完全不知道最后三个选择器。
谢谢 Chris。这是一篇很棒的文章。
谢谢 Chris。这是一篇非常有用的文章。
对于正在学习 CSS 的人来说，非常有用的信息。
感谢你把所有内容都放在一个地方。我参考过的一些教程相当复杂，现在我已经多次访问 CSS Tricks 来理清思路，事实上，一旦我掌握了如何提出问题，它就会很好地出现在 Google 中，否则我可能在 5 月或 6 月就不会再找到你了。
老实说，我一直犹豫要不要使用那些特殊的选择器。它们在所有浏览器中都能正常工作吗？
“.class:after” 和 “.class::after” 有什么区别？一个冒号和两个冒号？为什么？
特里·李，“.class:after” 是旧的 CSS2 语法，用于伪选择器。
“.class::after” 是新的 CSS3 语法。它使用两个“::” 的原因是为了清楚地区分伪类和伪元素。
例如，“a:active” 是一个伪类，它用于目标锚元素的活动状态。
想象一下，使用“a:after” 在锚元素之后添加一些内容。这会让一些人感到困惑。因此，最好使用“a::after”。不过，请注意，IE8 仍然使用旧的 CSS2 语法，只使用一个“：”。