Frontend Academy · 课时

选择器与层叠

Q: 「选择器与层叠」这节课中我会学到什么？

使用类型、class、ID 和属性选择器选择元素。了解优先级、继承和层叠，从而预测哪些样式会生效。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用类型、class、ID 和属性选择器选择元素。了解优先级、继承和层叠，从而预测哪些样式会生效。

选择器与层叠 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 CSS

CSS（层叠样式表）是一种控制视觉呈现的语言。您需要编写规则——每条规则都有一个用于定位元素的选择器，以及一个包含属性-值对的声明块。

selector {
  property: value;
  another-property: value;
}

类型、类和 ID 选择器

三种基本选择器分别是：类型选择器定位某个标签的所有元素（p），类选择器定位带有某个类的元素（.card），ID选择器根据 ID 定位一个元素（#logo）。请优先使用类，因为 ID 的优先级非常高。

p { color: #333; }        /* type */
.card { padding: 16px; }   /* class */
#logo { width: 200px; }    /* ID */

属性和伪类选择器

您可以使用 [type="email"] 按属性值进行选择。请使用伪类表示状态：:hover、:focus、:active、:checked、:nth-child()、:first-child 和 :last-child。

input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }

组合器

组合器用于描述元素之间的关系：空格（后代）、>（直接子代）、+（相邻兄弟）和 ~（普通兄弟）。

nav a { color: white; }        /* descendant */
nav > ul { list-style: none; }  /* child */
h2 + p { margin-top: 0; }       /* adjacent sibling */

优先级：谁会生效

当多条规则定位同一个元素时，优先级决定哪条规则会生效。ID 选择器（0,1,0,0）优先于类选择器（0,0,1,0），类选择器又优先于类型选择器（0,0,0,1）。内联样式优先于所有其他样式。!important 优先于一切内容——请将它作为最后手段使用。

计算优先级

请分别统计 ID、类/属性/伪类和类型的数量，然后逐列进行比较。例如：#nav .link:hover = (0,1,1,1)。.nav a = (0,0,1,1)。前者优先。

/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }

/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }

层叠：顺序很重要

当优先级相同时，在样式表中后出现的规则会生效。这就是 CSS 中的 C——层叠。导入顺序和源代码顺序都很重要。

继承

某些 CSS 属性默认会被继承——即使您没有设置，子元素也会获得父元素的值。color、font-family 和 line-height 等与文本相关的属性会被继承，而 margin 等盒模型属性不会。

body {
  font-family: 'Inter', sans-serif; /* all text inherits this */
  color: #1a202c;                   /* all text inherits this */
}

:is() 和 :where() 选择器

:is() 和 :where() 让您可以编写简洁的选择器，以匹配列表中的任意一项。区别在于：:is() 会继承其参数中的最高优先级，而 :where() 的优先级始终为零。

/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
  color: inherit;
}

通用选择器 *

通用选择器 * 可以匹配每个元素。它通常用于 CSS 重置：*, *::before, *::after { box-sizing: border-box; }，这样可以让盒模型更加可预测。

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

浏览器默认样式

浏览器会在应用您的样式表之前，先应用自己的默认样式表（用户代理样式表）。CSS 重置（例如 normalize.css）或 CSS 层可以中和这些默认样式，让您的样式从一个已知的基准开始。

快速检查

哪个选择器具有最高的优先级？

回顾：选择器和层叠

请使用类型、类、ID、属性和伪类选择器定位元素。优先级用于解决冲突（ID > 类 > 类型）。层叠使用源代码顺序来解决优先级相同的情况。继承会自动将文本样式传递给后代元素。

常见问题解答

「选择器与层叠」课时是免费的吗？

是的 — 「选择器与层叠」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「选择器与层叠」这节课中我会学到什么？

使用类型、class、ID 和属性选择器选择元素。了解优先级、继承和层叠，从而预测哪些样式会生效。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「选择器与层叠」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy