CSS：权威指南读书笔记第二章：选择器-CSDN博客

本文链接：https://blog.csdn.net/weixin_42590873/article/details/135692813

第二章：选择器

CSS的一个主要优点是它能够轻松地将一组样式应用于同一类型的全部元素。

CSS基本语法格式

CSS允许您创建易于更改、编辑和应用于所有您定义的文本元素的规则。例如，您可以编写以下规则，使所有<h2>元素显示为灰色：
h2 {color: gray;}

每个规则都有两个基本部分：选择器（selector）和声明块（declaration block）。声明块由一个或多个声明（declaration）组成，每个声明则是一个属性-值对（property-value）。每个样式表由一系列规则组成。

类型选择器

类型选择器，以前称为元素选择器，通常是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;}

分组

到目前为止，我们已经学习了如何向一个选择器应用一个样式，这个技术相当简单。但是如果想为多个元素应用同一个样式该怎么做呢？倘若如此，可能要使用多个选择器，或者向一个元素或一组元素应用多个样式。

选择器分组

假设希望h2元素和段落都有灰色文本。为达到这个目的，最容易的做法是使用以下声明：

h2,p {color:gray;}
将h2和p选择器放在规则的左边，并用一个逗号来分隔，这样就定义了一个规则，其右边的样式（color: gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。

通配选择器

CSS2引入了一种新的简单选择器，称为通配选择器（universal selector），显示为一个星号（*）。这个选择器可以与任何元素匹配，就像是一个通配符。例如，要让一个文档中的每一个元素都为红色，可以写为以下规则：

*{color: red;}
这个声明等价于列出了文档中所有元素的一个分组选择器。

声明分组

既然可以将选择器分组到一个规则中，当然也可以对声明分组。例如

h1 {font: 18px Helvetica; color: purple; background: aqua;}

注意，对声明分组时，一定要在各个声明的最后使用分号，这很重要。尽管从技术上讲没有必要让规则的最后一个声明也以分号结尾，不过这通常是一个好的实践做法。

例如：

h1 {

font: 18px Helvetica;

color: purple background: agua;

}
因为background:对于color来说不是一个合法值，而且由于只能为color指定一个关键字，所以用户代理会完全忽略这个color声明（包括background: aqua部分。这样h1标题只会显示为紫色文本，而没有淡绿色背景，不过更有可能根本得不到紫色的h1。相反，这些标题只会显示为默认颜色（通常是黑色），而且根本没有背景色（font:18px Helvetica声明仍能正常起作用，因为它确实正确地以一个分号结尾）。

结合选择器和声明的分组

h1,h2,h3,h4,h5,h6 {color: gray; background: white; padding:0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}

类选择器和ID选择器

类选择器

要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。不过，在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。输入以下class属性：

结构：.类名 { css属性名：属性值； }

.warning {font-weight:bold;}

<p class="warning">When handling plutonium,care must be taken to avoid the formation of a critical mass.</p>

<p>With plutonium,<span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span> This can be accomplished by keeping the various masses separate.</p>

可以看到，类选择器要正常工作，需要直接引用一个元素的class属性中的值。这个引用前面往往有一个点号（.），标记这是一个类选择器。通过这个点号，可以帮助类选择器与它可能结合的其他部分分隔开（如类选择器可能结合了元素选择器）。例如，你可能希望只在整个段落是警告时才显示为粗体文本：

p.warning {font-weight: bold;}
选择器现在会匹配class属性包含warning的所有p元素，但是其他任何类型的元素都不匹配，不论是否有此class属性。选择器p.warning解释为：“其class属性包含词warning的所有段落。”因为span元素不是一个段落，这个规则的选择器与之不匹配，因此span元素不会变成粗体文本。

多类选择器

在HTML中，一个class值中有可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为紧急（urgent）和警告（warning），就可以写作：

<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>

<p>With plutonium,<span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span>. This can be acconplished by keeping the various masses separate.</p>
这两个词的顺序无关紧要，写成warning urgent也可以。

现在假设希望class为warning的所有元素都是粗体，而class为urgent的所有元素为斜体，class中同时包含warning和urgent的所有元素还有一个银色的背景。就可以写作：

.warning {font-weight: bold;}

.urgent {font-style: italic;}

.warning.urgent {background: silver;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。可以看到，HTML源代码中包含class="urgent warning"，但CSS选择器写作.warning .urgent。如果一个多类选择器包含类名列表（类名以空格分隔）中所没有的一个类名，匹配就会失败。

考虑以下规则：

p.warning.help {background: red;}
不出所料，这个选择器将只匹配class包含词warning和help的那些p元素。因此，如果一个P元素的class属性中只有词warning和urgent,将不能匹记。不过，它能匹配以下元素：

ID选择器

结构：#类名 { css属性名：属性值； }

在某些方面，ID选择器类似于类选择器，不过也有一些重要的差别。首先，ID选择器前面有一个#号——也称为棋盘号而不是点号。第二个区别是ID选择器不引用class属性的值，毫无疑问，它要引用id属性中的值。

不同于类选择器，ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。

还要注意，类选择器和ID选择器可能是区分大小写的，这取决于文档语言。HTML和 XHTML将类和ID值定义为区分大小写，所以类和ID值的大小写必须与文档中的相应值匹配。因此，对于以下的CSS和HTML，元素不会变成粗体：

p.criticalInfo {font-weight:bold;}

<p class="criticalinfo">Don't look down.</p>
由于字母i的大小写不同，所以选择器不会匹配以上元素。

属性选择器

CSS2引人了属性选择器（attribute selector），它可以根据元素的属性及属性值来选择元素。共有4种类型的属性选择器。

简单属性选择

属性的或运算
语法：选择器[属性名]{属性：属性值；}
说明：只要选择器元素中有当前属性就会被选中。

如果希望选择有某个属性的元素，而不论该属性的值是什么，可以使用一个简单属性选择器。例如，要选择有class属性（值不限）的所有h1元素，使其文本为银色，可以写作：

h1[class]{color: silver;}

如果你想把包含标题（title）信息的所有元素变为粗体显示（光标停留在这些元素上时大多数浏览器都会将其显示为“工具提示”），就可以写作：

*[title]{font-weight: bold;}

属性的与运算
语法：选择器[属性1][属性2]{属性：属性值；}
说明：选择同时包含属性1和属性2的元素。

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有href和title属性的HTML超链接的文本置为粗体，可以写作：

a[href][title]{font-weight: bold;}

根据具体属性值选择

属性值的筛选
语法：选择器[属性名='要求']{属性：属性值；}
说明：选择对应的属性值符合要求的元素。

除了选择有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。例如，假设想将指向Web服务器上某个特定文档的超链接变成粗体，可以写作：

a[href="http:www.css-discuss.org/about.html"]{font-weight: bold;}

与属性选择类似，可以把多个属性-值选择器链接在一起来选择一个文档。例如，为了将href值为http://www.w3.org/而且title属性值为W3C Home的所有HTML超链接的文本大小加倍，可以写作：

a[href="http://www.w3.org/"][title="W3C Home"]{font-size: 200%;}

注意，这种格式要求必须与属性值完全匹配。

根据部分属性值选择

类型描述

类型	语法	描述
[foo~="bar "]	语法：选择器[属性名~='要求']{属性：属性值；}	选择任何具有属性foo的元素，其值包含单词bar作为空格分隔的单词列表
[foo*="bar "]	语法：选择器[属性名*='要求']{属性：属性值；}	选择任何具有属性foo的元素，其值包含子字符串bar
[foo^="bar "]	语法：选择器[属性名^='要求']{属性：属性值；}	选择任何具有属性foo的元素，其值以bar开头
[foo$="bar "]	语法：选择器[属性名$='要求']{属性：属性值；}	选择任何具有属性foo的元素，其值以bar结尾
[foo\| ="bar "]	语法：选择器[属性名\| ='要求']{属性：属性值；}	选择任何具有属性foo的元素，其值以bar开头，后跟破折号（U+002D），或其值完全等于bar