Skip to Content
CSS：权威指南，第 5 版
book

CSS：权威指南，第 5 版

by Eric Meyer, Estelle Weyl
May 2025
Intermediate to advanced
1128 pages
15h 21m
Chinese
O'Reilly Media, Inc.
Content preview from CSS：权威指南，第 5 版

第 2 章 选择器 选择器

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：translation-feedback@oreilly.com

，CSS 的主要优势之一就是能够轻松地将一组样式应用于所有相同类型的元素。还不满意吗？想想看：只需编辑一行 CSS，你就可以改变所有标题的颜色。不喜欢现在使用的蓝色？只需修改一行代码，它们就可以变成紫色、黄色、栗色或其他任何你想要的颜色。

这种功能可以让作者专注于设计和用户体验，而不是繁琐的查找和替换操作。下一次，当你在开会时，有人想看到不同颜色的绿色标题时，只需编辑你的样式，然后点击重新加载即可。就可以了！结果在几秒钟内就完成了，而且每个人都能看到。

基本风格规则

正如所说，CSS 的一个核心特点是它能够将某些规则应用于文档中的一整套元素类型。例如，假设你想让所有<h2> 元素的文本显示为灰色。在没有 CSS 之前，您必须在所有<h2> 元素中插入<font color="gray">...</font> 标记才能实现这一目的。使用style 属性应用内联样式（这也是不好的做法）需要在所有<h2> 元素中包含style="color: gray;" ，就像这样：

<h2 style="color: gray;">This is h2 text</h2>

如果您的文档包含大量<h2> 元素，这将是一个繁琐的过程。更糟糕的是，如果您后来决定希望所有这些<h2>都是绿色而不是灰色，您就必须重新开始手动标记。(是的，以前真的是这样做的！）。

CSS 允许你创建规则，这些规则可以简单地更改、编辑并应用于你定义的所有文本元素（下一节将解释这些规则是如何工作的）。例如，您只需编写一次该规则，就可以将所有<h2> 元素都设置为灰色：

h2 {color: gray;}

类型选择器

类型选择器（以前 称为元素选择器）最常见的是 HTML 元素，但并非总是如此。例如，如果 CSS 文件包含 XML 文档的样式，那么类型选择器可能是这样的：

quote {color: gray;}
bib {color: red;}
booktitle {color: purple;}
myElement {color: red;}

换句话说，文档中的元素就是被选择的节点类型。在 XML 中，选择器可以是任何东西，因为 XML 允许创建新的标记语言，这些语言可以使用任何东西作为元素名称。如果您要为 HTML 文档设计样式，选择器通常是众多已定义的 HTML 元素之一，如<p>,<h3>,<em>,<a>, 甚至<html> 本身。例如

html {color: black;}
h1 {color: gray;}
h2 {color: silver;}

图 2-1显示了该样式表的结果。

css5 0201
图 2-1. 简单文档的简单样式

将样式直接全局应用到元素后，就可以将这些样式从一个元素转移到另一个元素。比方说，你决定图 2-1中的段落文字应该是灰色的，而不是<h1> 元素。没问题。只需将h1 选择器更改为p ：

html {color: black;}
p {color: gray;}
h2 {color: silver;}

图 2-2显示了结果。

图 2-2. 将样式从一个元素移动到另一个元素

分组

到目前为止，您已经看到了将单一样式应用于单一选择器的相当简单的技术。但如果你想将同一样式应用于多个元素，该怎么办呢？通过 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services
QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

学习 Java，第 6 版

学习 Java，第 6 版

Marc Loy, Patrick Niemeyer, Daniel Leuck
学习 React，第二版

学习 React，第二版

Alex Banks, Eve Porcello
高效的软件工程师 (Chinese Edition)
技术主管的进阶之路 (Chinese Edition)

Publisher Resources

ISBN: 9798341657021