跳到主要内容

CSS 基本选择器

CSS（层叠样式表）是用于描述网页外观和格式的语言。选择器是CSS的核心组成部分，它决定了哪些HTML元素会被应用样式。本文将详细介绍CSS的基本选择器，帮助你理解如何通过选择器精确地控制网页元素的样式。

什么是CSS选择器？​

CSS选择器是一种模式，用于选择HTML文档中的元素并为其应用样式。选择器可以基于元素的名称、类、ID、属性等进行匹配。基本选择器是最简单、最常用的选择器类型，适合初学者掌握。

1. 元素选择器​

元素选择器是最基本的选择器类型，它通过HTML元素的名称来选择元素。例如，如果你想为所有段落（<p>）设置样式，可以使用元素选择器。

css
p {
  color: blue;
  font-size: 16px;
}

输入：

html
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

输出：

这是一个段落。

这是另一个段落。

备注

元素选择器会匹配文档中所有指定类型的元素。

2. 类选择器​

类选择器通过元素的class属性来选择元素。类选择器以点号（.）开头，后跟类名。类选择器允许你为多个元素应用相同的样式。

css
.highlight {
  background-color: yellow;
}

输入：

html
<p class={"highlight"}>这是一个高亮段落。</p>
<div class={"highlight"}>这是一个高亮区域。</div>

输出：

这是一个高亮段落。

这是一个高亮区域。

提示

类选择器可以用于多个元素，适合需要重复使用的样式。

3. ID选择器​

ID选择器通过元素的id属性来选择元素。ID选择器以井号（#）开头，后跟ID名。ID选择器通常用于选择唯一的元素。

css
#header {
  font-size: 24px;
  font-weight: bold;
}

输入：

html
<h1 id="header">网站标题</h1>

输出：

网站标题

警告

ID选择器应该用于唯一的元素，因为ID在文档中应该是唯一的。

4. 通用选择器​

通用选择器（*）选择文档中的所有元素。它通常用于重置样式或设置全局样式。

css
* {
  margin: 0;
  padding: 0;
}

输入：

html
<p>这是一个段落。</p>
<div>这是一个div。</div>

输出：

这是一个段落。

这是一个div。

注意

通用选择器会影响所有元素，使用时要谨慎。

5. 组合选择器​

组合选择器允许你将多个选择器组合在一起，以便更精确地选择元素。常见的组合方式包括：

  • 后代选择器：选择某个元素的后代元素。
  • 子元素选择器：选择某个元素的直接子元素。
  • 相邻兄弟选择器：选择某个元素之后的相邻兄弟元素。
  • 通用兄弟选择器：选择某个元素之后的所有兄弟元素。
css
/* 后代选择器 */
div p {
  color: green;
}

/* 子元素选择器 */
div > p {
  font-weight: bold;
}

/* 相邻兄弟选择器 */
h1 + p {
  font-style: italic;
}

/* 通用兄弟选择器 */
h1 ~ p {
  text-decoration: underline;
}

输入：

html
<div>
  <p>这是一个段落。</p>
  <p>这是另一个段落。</p>
</div>
<h1>标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

输出：

这是一个段落。

这是另一个段落。

标题

这是一个段落。

这是另一个段落。

备注

组合选择器可以帮助你更精确地控制样式的应用范围。

实际应用场景​

假设你正在设计一个博客页面，希望为不同的内容区域设置不同的样式。你可以使用类选择器为文章内容设置样式，使用ID选择器为页眉和页脚设置样式，并使用组合选择器为特定区域内的段落设置样式。

css
/* 文章内容样式 */
.article {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* 页眉样式 */
#header {
  background-color: #333;
  color: white;
  padding: 10px;
}

/* 页脚样式 */
#footer {
  background-color: #333;
  color: white;
  padding: 10px;
}

/* 文章内的段落样式 */
.article p {
  margin-bottom: 20px;
}

输入：

html
<div id="header">页眉</div>
<div class="article">
  <p>这是文章的第一段。</p>
  <p>这是文章的第二段。</p>
</div>
<div id="footer">页脚</div>

输出：

页眉

这是文章的第一段。

这是文章的第二段。

页脚

总结​

CSS基本选择器是控制网页样式的基础工具。通过元素选择器、类选择器、ID选择器和通用选择器，你可以精确地选择并样式化HTML元素。组合选择器则进一步增强了选择器的灵活性，使你能够更精确地控制样式的应用范围。

附加资源与练习​

  • 练习：尝试为你的网页创建一个简单的样式表，使用不同的选择器为不同的元素设置样式。
  • 资源：查阅MDN Web Docs了解更多关于CSS选择器的详细信息。

通过掌握这些基本选择器，你将能够更好地控制网页的外观和布局。继续学习更高级的选择器，如属性选择器、伪类选择器等，以进一步提升你的CSS技能。