CSS 选择器

您有一个充满元素的页面和一组想要应用的样式，但在您能够说明哪些元素应用它们之前，颜色或字体是无用的。选择器是您指向正确元素的方式：这个段落、每个按钮、仅导航内的链接。熟悉选择器之后，CSS 的其余部分就变成了选择要改变什么的问题，因为您已经知道如何到达它。

类型、类和 ID 选择器

CSS 规则有两部分：选择要设置样式的元素的**选择器**，以及说明如何设置的声明块。最简单的选择器是元素的名称，称为类型选择器。写 p，页面上的每个段落都会被设置样式。

这通常过于宽泛。您很少希望所有段落看起来都一样。因此，您使用 HTML class 属性给元素一个标签，称为类，并从 CSS 中用点号定位该标签。将类想象成一个名牌：您在想要视为一组的每个元素上贴上相同的标签，然后一次性设置该标签的样式。

html

<button class="btn-primary">注册</button>
<button class="btn-primary">立即购买</button>

css

/* 类型选择器：页面上的每个按钮 */
button {
  font-family: inherit;
}

/* 类选择器：仅标记为 btn-primary 的元素 */
.btn-primary {
  background: rebeccapurple;
  color: white;
}

两个按钮都从一个规则中获取 .btn-primary 样式，因为它们共享该类。那种重用就是您使用类的全部原因。这直接基于 CSS 如何工作，其中每个规则都将选择器与一组声明配对。

Juno类型、类和 ID 选择器像 p 这样的类型选择器会影响所有该类型的元素，这通常超过您想要的。类是一个名牌，您将其贴在关心的元素上，并用点号设置样式，如 .btn-primary。从类开始处理几乎所有内容，您不会出错。

组合器：按关系选择

有时您希望仅在元素位于另一个元素内时设置其样式。导航中的链接应该看起来与段落中的链接不同，即使两者都是 <a> 元素。您使用**组合器**来描述该关系：将两个选择器并排放置，空格分隔，CSS 将其解读为"第二个，但仅在第一个内部"。

所以 .nav a 意思是"任何位于具有 nav 类的元素内部的链接"。空格在这里发挥真实作用。它不是装饰，它是向内看的指令。

css

/* 后代：导航内任何链接 */
.nav a {
  text-decoration: none;
}

/* 子元素：仅作为 .menu 直接子元素的列表项 */
.menu > li {
  display: inline-block;
}

第一个规则到达导航内嵌套的每个链接；第二个仅到达菜单的顶级项，并单独保留任何嵌套列表。在它们之间选择就是选择您想要规则向下传播多远。

Juno组合器两个选择器之间的空格表示"内部"：.nav a 设置位于导航内的链接样式。该空格是指令，不是外观间距，所以不要不小心删除它。这个模式涵盖很多日常样式。

伪类：按状态设置样式

元素可以处于不同的状态。链接可以静止或鼠标悬停在其上。**伪类**让您根据其状态设置元素样式，您在选择器后用一个冒号编写它。

您将首先使用的是 :hover。写 .btn-primary:hover，这些样式仅在指针悬停在按钮上时应用，这就是按钮和链接在您指向它们时给出小视觉反应的方式。

css

.btn-primary:hover {
  background: purple;
}

/* 键盘用户需要可见的焦点指示符 */
.btn-primary:focus-visible {
  outline: 2px solid rebeccapurple;
  outline-offset: 2px;
}

第一个规则在指针悬停在按钮上时触发；第二个在按钮被键盘选中时绘制清晰的环，这是保持页面无需鼠标即可使用的原因。颜色和轮廓选择连接到 CSS 如何工作以及您在任何属性上设置的值。

Juno伪类伪类设置元素在某个状态下的样式，用一个冒号编写，如 :hover 当指针悬停在其上时。那是按钮悬停效果的来源。您将其直接附加到选择器上，中间没有空格。

伪元素：设置元素部分的样式

伪类设置整个元素在某个状态下的样式。**伪元素**是不同的：它让您设置元素的一部分的样式，或添加根本不在您的 HTML 中的小内容。

您将首先遇到的两个是 ::before 和 ::after。它们在元素的开始或结束处插入内容，您使用 content 属性告诉它们要插入什么。注意两个冒号：那个双冒号是 CSS 将伪元素与伪类分开的方式。

css

/* 在每个导航链接后添加装饰箭头 */
.nav a::after {
  content: " →";
  color: rebeccapurple;
}

/* 设置搜索框内提示文本的样式 */
.search-input::placeholder {
  color: grey;
  font-style: italic;
}

::after 规则插入一个仅存在于样式中而不是在 HTML 中的箭头，而 ::placeholder 到达输入内部以设置浏览器为您绘制的文本样式。两者都设置您用简单选择器无法以其他方式到达的东西。如果您设置提示文本和标签样式，排版章节在文本方面更深入。

Juno伪元素伪元素设置元素的部分样式或添加小内容，它使用两个冒号，如 ::before 和 ::after。这两个需要 content 属性来显示。双冒号是区别伪元素与伪类的快速方法。

优先级：哪个规则赢

迟早两个规则会尝试以不同的方式设置同一元素的样式。一个说文本是蓝色，另一个说是红色。浏览器必须选择一个，决定的方式称为**优先级**：更具体的选择器赢。

简短的版本是强度顺序。ID 选择器击败类选择器，类选择器击败类型选择器。所以如果 #header 和 .title 都在同一元素上设置颜色，ID 赢。当两个规则具有相同的优先级时，在文件中写得更靠后的赢。

css

/* 类型选择器，优先级 (0, 0, 1) */
p {
  color: grey;
}

/* 类选择器，优先级 (0, 1, 0)：这个赢 */
.intro {
  color: black;
}

html

<p class="intro">这个段落是黑色的，因为类规则高于类型规则。</p>

两个规则都针对段落，两个都设置 color，但类选择器比类型选择器更具体，所以段落是黑色。将一个选择器向上或向下推动优先级梯子往往是不诉诸更重工具解决冲突的全部。盒模型章节在间距规则冲突时遇到相同的级联。

Juno优先级当两个规则争夺同一元素时，更具体的赢：ID 击败类，类击败类型选择器。如果它们具有相同的优先级，在文件中最后出现的赢。这解释了大多数冲突。

CSS 选择器 ​

类型、类和 ID 选择器 ​

组合器：按关系选择 ​

伪类：按状态设置样式 ​

伪元素：设置元素部分的样式 ​