HTML for Kids · 课时

选择器类型

Q: 「选择器类型」这节课中我会学到什么？

选择器类型 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

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

简介

您好，

在本课中，我们将学习更复杂的选择器，进一步提升 CSS 知识。

多个样式定义

我们可以在每个样式之间添加分号，从而定义多个样式。

.first{
   color:blue;
   font-size:20px;
   text-align: center;
}

这里有一个更加复杂的 HTML 文档

到目前为止，我们一直使用简单的标签、ID和类选择器。但是，在某些情况下，当用户界面变得复杂时，我们需要使用更复杂的选择器。

在下面的示例中，有一个变得更加复杂的 HTML 文档。

<body>
	<div id="my-area">
		<p class="first">lorem</p>
		<div class="second">
				<p class="third">Ipsum</p>
	</div>
  </div>
</body>

分析示例

现在让我们分析代码。

页面主体中有一个带有 my-area ID 的 div，它充当容器。该 div 是其下所有元素的祖先元素。
带有 first 类的 p 元素，是带有 second 类的 div 元素的兄弟元素。
第三个元素是第二个元素的子元素，而 my-area 元素可以被视为第三个元素的祖先元素。

警告

您可以把 HTML 布局想象成一棵真实的家谱树。

您可以从祖父那里继承基因。

但是，如果这种遗传特征在父亲这一代发生变化，父亲的基因会更具显性，祖父遗传下来的特征也会随之改变。

选择器组合

现在，让我们看看如何组合选择器。

下面的语句表示：带有 second 类的元素，是带有 third 类元素的后代元素（子元素或孙元素）。

如果两个类之间有空格，就表示左侧的类正在查找后代元素。

.second .third{
	color:red;
}

子元素选择器

在下面的示例中，

它表示选择 second 类的子元素，即 third 类。

大于号表示选择相关元素的子元素。

.second > .third{
	color:red;
}

我们可以组合标签选择器和类选择器来选择元素

同时，我们也可以组合标签选择器和类选择器来选择元素。

下面的示例将选择带有 third 类的 p 元素。

<style>

p.third{
	color:red;
}

</style>


<p class="third">Hello CSS</p>

假设我们想选择带有 first 类的 div

假设我们想选择带有 first 类的 div。

在下面的示例中，它表示选择带有 first 类的元素，该元素是带有 my-area ID 的 div 元素的子元素。

这会提高待选择元素的特异性。


div#my-area > .first{
color:red;
}

全选

星号（*）在选择器中非常重要。

它表示选择全部元素。

在下面的示例中，选择器表示带有 my-area ID 的元素应选择所有后代元素。

这里需要注意的是，它选择的不只是子元素，而是所有后代元素。

如果我们只想选择子元素，就必须在星号前加上大于号。

/* It chooses all the descendants of #my-area. */
#my-area *{
	color:red;
}

/* It chooses all the children of #my-area. */
#my-area > *{
	color:red;
}

相邻兄弟选择器

我们已经使用了后代选择器和子元素选择器，现在让我们学习兄弟选择器。

兄弟选择器使用加号来选择下一个兄弟元素。

在我们的示例中，选择器会将第 3 个段落元素的背景颜色设置为黄色。

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>

通用兄弟选择器

如果我们不仅想选择紧随其后的第一个兄弟元素，而是想选择后面的所有兄弟元素，就要使用波浪号（~）。

波浪号符号也被称为后续兄弟组合器。

<style>

div ~ p {
  background-color: red;
}

</style>

<p>Paragraph 1.</p>
<div>
  <p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>

伪类与 CSS 类

不是类但表现得像类的表达式称为伪类。

我们不会在 HTML 中为任何元素定义伪类。

浏览器解释代码时，会假定这些伪类存在。因此，我们可以在 CSS 选择器中使用伪类。

:hover 伪类

在众多伪类中，:hover 无疑是最为人熟知的。

悬停（:hover）是一种伪类，当鼠标悬停在元素上时，浏览器会自动将其定义到相关元素上。

在选择器语句中，伪类位于冒号（:）符号之后。

下面演示了伪类的使用语法。

selector:pseudo-class {
   property: value;
}

使用 :hover 设置链接样式

现在让我们创建一个链接，看看鼠标悬停在链接上时它会呈现什么样子。

警告：由于移动设备上不像 Web 那样存在悬停事件，因此在 CoddyKit 移动应用中不会看到此效果。

在下面的示例中，当我们将鼠标悬停在链接上时，链接颜色会变成绿色。

<!DOCTYPE html>
<html>
<head>
<style>

.my-link{
	color:red;
	}

.my-link:hover{
	color:green;
}

</style>
</head>
<body>

<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>

</body>
</html>

:first-child 伪类

最容易令人困惑的伪类之一是 :first-child。

通常，看到这个名称时，我们可能会理解为选择某个元素的第一个子元素。

实际上，这种理解并不正确。

它用于选择某个元素的兄弟元素中的第一个元素。

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the first p element 
among children of the my-box class. */

.my-box p:first-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

:last-child 伪类

last-child 是 first-child 伪类的相反形式。它用于选择某个元素的兄弟元素中的最后一个元素。

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the last p element 
among children of the my-box class. */

.my-box p:last-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

::before 伪元素

如果我们想要在元素之前添加内容，就可以使用 ::before 伪选择器。

在下面的示例中，我们在标题元素之前添加了“Hello”内容。

<!DOCTYPE html>
<html>
<head>
<style>
	h1::before {
			content: "Hello ";
	}
</style>
</head>
<body>

<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>

</body>
</html>

::after 伪元素

::after 伪元素与 ::before 伪元素相反，用于在元素之后添加新内容。

<!DOCTYPE html>
<html>
<head>
<style>
	h1::after {
			content: " Coddykit";
	}
</style>
</head>
<body>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

</body>
</html>

列表伪类

我们学习了最常用的伪类。不过，伪类还有几十种。

您可以通过下面的链接查看所有伪类的列表。需要时可以使用其中的任意一种。

恭喜

恭喜您 🎉

在本部分中，我们学习了选择器类型。

下一部分中，我们将学习最常用的 CSS 属性

常见问题解答

「选择器类型」课时是免费的吗？

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

「选择器类型」这节课中我会学到什么？

选择器类型你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML for Kids 需要有经验吗？

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

「选择器类型」课时需要多长时间？

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

我能在这节 HTML for Kids 课中编写并运行代码吗？

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

← 返回 HTML for Kids