May 2025
Intermediate to advanced
1128 pages
15h 21m
Chinese
Content preview from CSS：权威指南，第 5 版
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,
O’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.I 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.I’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.I'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.
第 3 章 伪类和元素选择器 伪类和伪元素选择器
本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：translation-feedback@oreilly.com
在上一章中，你看到了选择器如何使用相当简单的表达式来匹配文档中的 HTML 属性，从而匹配单个元素或元素集合。如果你只需要根据属性来设计样式，那么这些表达式就很不错，但如果你需要根据文档的当前状态或结构来设计部分文档的样式呢？或者，如果你想选择所有被禁用的表单元素，或者那些表单提交必须允许的元素呢？ 针对这些情况以及更多情况，CSS 提供了伪类和伪元素选择器。
伪类选择器
通过伪类选择器，您可以将样式分配给实际上由某些元素的状态、文档中的标记模式、甚至文档本身的状态推断出的虚拟类。
幻象类这个词可能看起来有点奇怪，但它确实是理解伪类如何工作的最佳方式。例如，假设你想突出显示数据表中的每一行。你可以用类似class="even" 的方法标记每一行，然后编写 CSS 来高亮显示带有该类的行--或者（你很快就会看到）你可以使用伪类选择器来达到同样的效果，伪类选择器的作用就好像你在标记中添加了所有这些类，尽管你并没有这样做。
这里需要明确说明伪类的一个方面：伪类总是指向其所连接的元素，而不是其他元素。这似乎是一件很明显的事情，对吗？我们之所以明确指出这一点，是因为对于某些伪类来说，认为它们是指向后代元素的描述符是一个常见错误。
为了说明这一点，埃里克想分享一则个人轶事：
2003 年我的第一个孩子出生时，我像其他人一样在网上宣布了这一消息。很多人回复了祝贺和 CSS 笑话，其中最主要的是选择器
#ericmeyer:first-child（我们稍后会提到:first-child）。但是，这个选择器选择的是我，而不是我的女儿，而且前提是我是我父母的第一个孩子（事实上，我就是）。要正确选择我的第一个孩子，该选择器必须是#ericmeyer > :first-child。
这种困惑是可以理解的，这也是我们在这里解决这个问题的原因。在下面的章节中，我们还将进行提醒。只要始终牢记伪类的作用是为其所连接的元素应用一种幽灵类，就不会有问题了。
所有伪类，无一例外，都是一个单词或连字符词，前面加一个冒号 (:)，它们可以出现在选择器的任何位置。
组合伪类
在我们真正开始之前，请先了解一下chaining。CSS 可以将伪类组合（连锁）在一起。例如，您可以将未访问链接悬停时设置为红色，将已访问链接悬停时设置为栗色：
a:link:hover{color:red;}a:visited:hover{color:maroon;}
您指定的顺序并不重要；您也可以写a:hover:link ，效果与a:link:hover 相同。还可以为使用另一种语言（如德语）的未访问链接和已访问链接指定不同的悬停样式：
a:link:hover:lang(de){color:gray;}a:visited:hover:lang(de){color:silver;}
注意不要将相互排斥的伪类组合在一起。例如，链接不可能既是已访问的又是未访问的，因此a:link:visited 没有任何意义，也不会匹配任何内容。
结构伪类
我们要探讨的第一组伪类是结构性的；也就是说，它们指的是文档的标记结构。它们中的大多数都依赖于标记中的模式，例如每隔三段选择一个，但也有一些伪类允许你处理特定类型的元素。
选择根元素
这是结构简单的精髓：伪类:root 选择文档的根元素。在 HTML 中，这始终是 <html> 元素。 ...
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
O’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.
I 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.
I’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.
I'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.