注意该规则没有设计 内 的样式 ， 只是设计了元素内 的样式 。
图5-2 显示第二个具有选定样式的 必须记住 ， 子选择符意味着所有子代 ， 不仅仅是直接子代 。
子代可以是元素内的元素 ， 该元素又在其他元素之内 。
这让 。

18、用户可以制定适用于所有子元素的规则 ， 而不管它内嵌多深 。
用户也可以将部分样式（通过class和 设置）和基于元素的类型选择符组合起来 。
例如 ， 下面的代码改变了header（标题）部分标签的字体外观和颜色 ， 但是标题余下的部分没有改变 ， 包括.header类没有包含的其他段落标签：.header p font-family: verdana, sans-serif;
color: white;
background-color: black;
该规则的效果如图5-3所示 。
程序清单5-4列出了一个更完整的样式表 ， 该样式表演示了如何设置许多不同的组合选择符 。
要将它与作者的电影评论页面一起使用 ， 就需要将下面的代 。

19、码添加到页面的 ：图5-3 改变标题部分字体样式程序清单5-4 单个样式表中使用各种选择符/* babe-5.4.css: style sheet for babe review */body font-family: arial, sans-serif;
color: black;
background-color: white;
.header h1 font-family: courier new, monospace;
color: silver;
background-color: black;
.header cite font-family: verdana, sans-serif;
ba 。

20、ckground-color: silver;
color: black;
.header p font-family: arial, monospace;
color: black;
font-size: x-large;
.opinion h2 color: white;
background-color: navy;
font-family: arial, sans-serif;
em font-size: larger;
p cite color: white;
background-color: black;
.footer font-family: times new roman, serif 。

21、;
font-size: small;
color: white;
background-color: gray;
.footer a color: white;
background-color: black;
图5-4显示了程序清单5-3应用该样式表后的样子 。
图5-4 显示具有单独样式的不同选择符试验简单选择符 可以使用本章的html文件示例试验上述选择符 。
1从本书的网站下载程序清单5-1中的可访问性提示或下载程序清单5-3中的电影评论 。
2在浏览器中打开html文件并查看其没有样式的情形 。
3创建样式表 。
添加基于html中设置的class和id属性的样式规则 。
选择自己的文本颜色、背景、字体大小和其他 。

22、属性 。
4用 元素将样式表链接到html文件 ， 并在浏览器中查看它 。
它们是期望的样式吗？如果不是 ， 重试直到满意为止 。
5添加到html文件-重写文本 ， 添加更多段落 ， 创建新的class和id属性 。
编写基于这些的新规则 。
甚至可以从头开始编写自己的页面 ， 使用自己的内容来测试组合选择符 。
除了类型选择符、id选择符和class选择符之外 ， css也允许使用伪类和伪元素选择符 。
伪类选择符是基于一组预定义性质的选择符 ， html元素可以占有这些预定义性质 。
实际上这些性质与class属性的功能是相同的 ， 因此在css术语中 ， 它们被称作伪类 。
在对应这些伪类的标记中 ， 不存在真正的class属性 ， 相反 ， 它们代表应用到这些元素的 。

23、某些方面 ， 或者是相对于该元素的浏览器用户界面的状态 。
伪选择符标识虚拟元素 ， 即在标记中不存在 ， 但是浏览器可以推理并应用样式的元素 。
在伪类中 ， 没有对应伪元素的标记 。
5.3.1 简单伪类 css中的伪类如表5-1所示 。
:active、:focus和:hover伪类将在第12章中讨论 。
表5-1 css伪类伪类选择:active被激活的元素（例如激活的链接） :first-child元素的第一个子元素:focus具有焦点的元素（例如接收输入的表单字段）:hover指向的元素（例如通过鼠标）:lang()特定语言的样式:link未跟踪的链接:visited以前访问过的链接伪类在样式规则中可以独立存在 ， 就像 。

24、类一样 ， 但是最常见的情况还是作为类型选择符与元素一起使用 ， 例如：:link color: red;
a:link color: red;
这两条规则都是正确的 。
前者应用于所有属于链接的元素 ， 而后面的规则只包括 标签 。
实际上 ， 在html中它们是一回事 ， 只有 元素是链接 ， 因此规则的意思相同 。
用户通过把伪类和真正的类甚至是其他伪类放在一起 ， 中间不留空格 ， 只有.和：指示符 ， 可以将它们联合起来 。
例如 ， 下面是在链接上设置了class属性的html：search the site.idyll mountain internet这是与每个链接一起运行的规则 。
注意 ， class和伪类的顺序并不重要：a:link. 。

稿源：(未知)

【傻大方】网址：/a/2021/0813/0023654857.html

标题：CSS|CSS入门经典(第2版)( 三 )