网页css的类选择器和id选择器-盈岚科技

网页css的类选择器和id选择器

2018-08-01 07:29:39
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

除了指示网页文档元素的选择器外，还有另外两种类型的选择器：类选择器（class selector）和ID选择器（ID selector），它们允许以一种独立于文档元素的方式来指定样式。这些选择器可以单独使用，也可以与其他元素选择器结合使用。不过，只有适当地标记文档后才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

例如，假设你在制作一个网页，讨论钚的各种处理方法。这个网页中对于如何安全地处理这样一种危险物质有很多警告。你希望这些警告以粗体文本出现，这样就能突出显示。不过，你并不知道这些警告具体是哪些元素。有些警告可能是整个段落，而另外一些可能只是一个长长的列表中的一项，或者只是一小段文本。所以，无法使用任何简单选择器来定义这样一个规则。假设你想把规则写作：

p {font-weight: bold;}

那么所有段落都会变成粗体，而不仅是那些包含警告的段落。你需要一种合适的方法，只选择包含有警告的文本，或者更确切地讲，需要一种方法只选择作为警告的那些元素。该怎么做呢？这种情况下可以使用类选择器，向文档中已经以某种方式标记的部分应用样式，而不考虑具体涉及到哪些元素。

类选择器

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

<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属性指定为一个适当的值。在前面的代码中，有两个元素的class值指定为warning:第一段（第一个p元素）以及第二段中的span元素。

现在所需要的仅是向这些归类的元素应用样式的方法。对于HTML文档，可以使用一种很简洁的记法，即类名前有一个点号（.），而且可以结合一个简单选择器：

*warning {font-weight:bold;}

也就是说，font-weight: bold的网页样式会应用到class属性值为warning的所有元素（因为这里有一个通配选择器）。

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

p.warning {font-weight: bold;}

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

如果你确实希望为span元素指定不同的样式，可以使用选择器span.warning:

p.warning {font-weight: bold;}

span.warning {font-style: italic;}

在这种情况下，警告段落会变成粗体，而警告span会变成斜体。每个规则只应用于某种特定类型的元素/类组合，所以不会影响其他元素。

另一种选择是组合使用一个通用类选择器和一个元素特定类选择器，这样可以得到更有用的样式，如以下标记所示：

.warning {font-style: italic;}

span.warning {font-weight: bold;}

在这种情况下，所有警告文本都会变成斜体，不过只有class为warning的span元素中的文本会变为粗斜体。

注意前例中通用类选择器的格式：这里只有一个类名，前面有一个点号而没有任何元素名。如果你只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响。

多类选择器

我们处理了class值中包含一个词的情况。在网页中，一个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;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。可以看到，网页源代码中包含class="urgent warning"，但CSS选择器写作.warning .urgent。不过，这个规则还是会导致“When handling plutonium ...”段落有一个银色的背景。

如果一个多类选择器包含类名列表（类名以空格分隔）中所没有的一个类名，匹配就会失败。考虑以下规则：

p.warning.help {background: red;}

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

警告：在IE7之前的版本中，不同平台的Internet Explorer都不能正确地处理多类选择器。对于这些较早的版本，尽管可以选择列表中的一个类名，但是要根据列表中的多个类名进行选择时则无法工作。因此，P.waming可以正常工作，但p.warning.help会匹配class属性中包含help的所有p元素，因为help在选择器中最后出现。如果写作p.help.warning,较老版本的Explorer就会匹配class值中包含warning的所有p元素，而不论其中是否出现help。

ID选择器

在某些方面，ID选择器类似于类选择器，不过也有一些重要的差别。首先，ID选择器前面有一个#号——也称为棋盘号而不是点号。因此，可以看到如下的一个规则：

*#first-para {font-weight: bold;}

这个规则会让id属性中包含值first-para的所有元素显示为粗体文本。

第二个区别是ID选择器不引用class属性的值，毫无疑问，它要引用id属性中的值，以下是一个实标ID选择器的例子：

*#lead-para {font-weight:bold;}

<p id="lead-para">This paragraph will be boldfaced.</p>

<p>This paragraph will NOT be bold.</p>

注意可能对文档中的任何元素指定了值lead-para。在这个特定情况下，规则将应用到第一段，不过也可以同样很容易地应用到第二段或第三段。

与类选择器一样，ID选择器中可以忽略通配选择器。前面的例子也可以写作：

#lead-para {font-weighc:bold;}

这个选择器的效果将是一样的。

类选择器还是ID选择器？

如前所述，可以为任意多个元素指定类，前例中类名warning被应用到p和span元素，而且它还可以应用到更多的元素。与此不同，在一个HTML文档中，ID选择器会使用一次，而且仅一次。因此，如果有一个元素的id值为lead-para,那么该文档中所有其他元素的id值都不能是lead-para。

注意：实际中，浏览器通常并不检查网页中ID的唯一性，这意味着如果你在HTML文档中设罝了多个有相同ID属性值的元素，就可能为这些元素应用相同的样式。这种行为是不正确的，不过这种情况常会发生。如果一个文档中有多个相同的ID值，还会导致编写DOM脚本更为困难，因为像getElementByid( )之类的函数的前提是仅一个元素有给定的ID值。

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

从纯语法意义上讲，点号加类名的记法（如.warning）对XML文档不一定能奏效。在写这本书时，点号加类名的记法在HTML、SVG和MathML中能正常工作，也许将来的语言也支持，不过这要由各个语言的规范来决定。#号加ID的记法（如#Lead）可以在任何文档语言中使用，只要其中有一个属性在文档中能保证唯一即可。唯一性可以用名为id的属性来保证，或者可以是任何其他属性，只要属性的内容在文档中定义为唯一。

class名和id名之间的另一个区别是，如果你想确定应当向一个给定元素应用哪些样式，ID能包含更多含义。

类似于类，还可以独立于元素来选择ID。有些情况下，你知道文档中会出现某个特定的ID值，但是并不知道它会出现在哪个元素上（就像处理钚的警告一样），所以你想声明独立的ID选择器。例如，你可能知道在一个给定的文档中会有一个ID值为most important的元素。你不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。你只知道每个文档中都会有这么一个最重要的内容，它可能出现在任何元素中，而且只能出现一次。在这种情况下，可以编写如下规则：

#mostImportant {color: red; background: yellow;}

这个规则会与以下各个元素匹配（前面已经提到，这些元素不能在同一个文档中同时出现，因为它们都有相同的ID值）：

<h1 id="mostImportant ">This is important!</h1>

<em id="mostImportant ">This is important!</em>

<ul id="mostlmportant">This is important!</ul>

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

p.criticalInfo {font-weight:bold;}

由于字母i的大小写不同，所以选择器不会匹配以上元素。

警告：一些较老的浏览器不区分类名和ID名的大小写，但是写这本书时，所有当前的浏览器都要求区分大小写。

属性选择器

对于类选择器和ID选择器，你所做的实际上只是选择属性值。前面两小节中使用的语法是HTML、SVG和MathML文档特定的（写这本书时是如此），在其他标记语言中，不能使用这些类和ID选择器。为了解决这个问题，CSS2引人了属性选择器（attribute selector），它可以根据元素的属性及属性值来选择元素。共有4种类型的属性选择器。

警告：Safari、Opera和所有基于Gecko的浏览器都支持属性选择器，不过在IE5/Mac和IE6/Win 之前，Internet Explorer并不支持属性选择器。IE7全面支持所有CSS2.1属性选择器，还支持一些CSS3属性选择器，这一节将讨论这个内容。

简单属性选择

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

h1[class]{color: silver;}

所以，给定如下标记：

<h1 class="hoopla">Hello</h1>

<h1 class="severe">Serenity</h1>

这个策略在XML文档中相当有用，因为XML语言主张要针对元素和属性的用途指定元素名和属性名。考虑描述太阳系行星的一个XML语言（我们称之为PlanetML）。如果你想选择有moons属性的所有planet元素，使之显示为粗体，以便能更关注有moons的行星，就可以写作：

planet[moons]{font-weight: bold;}

这会让以下标记片段中第二个和第三个元素的文本显示为粗体，但第一个元素的文本不是粗体：

<planet>Venus</planet>

<planet moons="1">Earth</planet>

在网页文档中，可以采用一些创造性的方法使用这个特性。例如，可以对所有带有alt属性的图像应用某种样式，从而突出显示这些有效的图像：

img[alt](border: 3px solid red;}

（这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。）

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

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

类似地，可以只对有href属性的锚（a元素）应用样式。

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

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

这会将以下标记中的第一个链接变成粗体，但第二个和第三个链接不变：

<a href ="http://www.webstandards.org">Standards Info</a><br />

<a title="Not a link">dead letter</a>

根据具体属性值选择

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

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

可以为任何元素指定属性和值组合。不过，如果文档中没有出现该组合，选择器将无法匹配。同样地，XML语言也可以利用这种方法来设置样式。下面再回到我们的PlanetML例子。假设只想选择moons属性值为1的那些planet元素：

planet[moons="1"]{font-weight: bold;}

这会把以下标记片段中第二个元素的文本变成粗体，但第一个和第三个元素不受影响：

<planet>Venus</planet>

<planet moons="1">Eareh</planet>

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

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

这会把以下标记中第一个链接的文本大小加倍，但第二个或第三个链接不受影响：

<a href="http://www.webstandards.org" title="Web Standards Organization">Standards Info</a><br />

注意，这种格式要求必须与属性值完全匹配。如果遇到的值本身包含一个用空格分隔的值列表（如HTML属性class），匹配就会出问题。例如。考虑以下标记片段：

<planet type="barren rocky">Mercury</planet>

要根据具体属性值匹配这个元素，唯一的办法就是写作：

planet[type="barren rocky"]{font-weight:bold;}

如果写成planet[type="barren"]，这个规则不能匹配示例标记，因而会失败。HTML中的class属性也是如此。考虑以下片段：

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

要根据具体属性值来选择这个元素，必须写作：

p[class="urgent warning"]{font-weight: bold;}

这不同于先前介绍的点号类名记法，有关内容将在下一节讨论。相反，这个规则会选择class属性值为urgent warning的所有p元素，要求属性值中urgent在前warning 在后，而且有一个空格将其分隔，这实际上就是一个完全串匹配。

另外，要注意ID选择器与指定id属性的属性选择器不是一回事。换句话说，h1#page-title和h1[id="page-title"]之间存在着微妙但很重要的差别。

根据部分属性值选择

如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择。在HTML中，这方面最经典的例子就是class属性，它能接受一个或多个词作为其属性值。以下是我们经常使用的示例文本：

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

假设你想选择class属性中包含warning的元素，可以用一个属性选择器做到这一点：

p[class~="warning"]{font-weight:bold;}

注意选择器中出现了一个波浪号（~）。这正是部分选择的关键，即根据属性值中出现的一个用空格分隔的词来完成选择。如果忽略了这个波浪号，如上一节所述，则说明需要完成完全值匹配。这个选择器构造等价于先前讨论的点号类名记法。因此，p.warning和p[class~="warning"]应用到HTML文档时是等价的。以下是一个例子，这是前面“PlanetML”标记的网页版本：

<span class="barren rocky">Mercury</planet>

<span class="cloudy barren">Venus</planet>

<span class="life-bearing cloudy">Earth</planet>

为了把class属性中有barren的所有元素变为斜体，可以写作：

span[class~="barren"]{font-style: italic;}

这个规则的选择器会匹配示例标记中的前两个元素，因此这两个元素的文本将变成斜体。写作span.barren {font-style:italic;}也能得到同样的结果。

那么HTML中为什么还要有这种“~=”属性选择器呢？因为它能用于任何属性，而不只是class。例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于title文本的部分值属性选择器，只选择这些图片。

img[title~="Figure"]{border: 1px solid gray;}

这个规则会选择title文本包含Figure的所有图像。因此，只要图片有诸如“Figure 4. A bald-headed elder statesman"之类的title文本，就能与这个规则匹配。由于这个原因，选择器img[title~="Figure"]还会匹配值为“How To Figure Out Who's In Charge”的title属性。没有title属性的图像或者title值中不包含“Figure”的图像都不会匹配。

还有一个更高级的CSS选择器模块，这是在CSS2完成之后发布的，其中包含更多的部分值属性选择器（或者按规范的说法，称之为“子串匹配属性选择器”）。由于这些属性选择器在很多现代浏览器中都得到了支持，包括IE7。

后代选择器

理解这个结构模型后，第一个好处是可以定义后代选择器（descendant selector,也称为包含选择器）或上下文选择器（contextual selector）。定义后代选择器就是来创建一些规则，它们仅在某些结构中起作用，而在另外一些结构中不起作用。举例来说，假设你希望只对从h1元素继承的那些em元素应用样式。可以在h1中找到的每个em元素上放一个class属性，但是这就像使用font标记一样费功夫。显然，更高效的做法是声明一些规则，只与h1元素中包含的em元素匹配。

为此，可以写作：

h1 em {color: gray;}

这个规则会把作为h1元素后代的em元素的文本变成灰色。其他em文本（如段落或块引用中的em）则不会被这个规则选中。

在一个后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“……在……中找到”，“……作为……的一部分”，或“……作为……的后代”，但是要求必须从右向左读选择器。因此，h1 em可以解释为“作为h1元素后代的任何em元素”（译注1）[1]。（如果要从左向右读选择器，可以换成以下说法：“包含一个em的所有h1会把以下样式应用到该em”）

当然并不仅限于两个选择器，例如：

在这种情况下，会把一个无序列表中的强调文本置为灰色，这个无序列表是一个有序列表的一部分，而这个有序列表本身又是另一个无序列表的一部分（尽管很复杂，不过这确实没有错）。显然这是一个很特定的选择原则。

后代选择器功能极其强大。有了这些后代选择器，使得网页中不可能实现的任务（至少是如果不大量使用font标记就无法做到的事情）成为可能。假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区背景为白色，这两个区都包含链接列表。

不能把所有这些链接都设置为蓝色，因为这样一来边栏中的蓝色链接将无法看到。

解决方法是使用后代选择器。在这种情况下，可以为包含边栏的表单元格指定一个值为sidebar的class属性，并把主区的class属性值设置为main。然后编写以下样式：

td.sidebar {background: blue;}

td.main {background: white;}

td.sidebar a:link {color: white;}

td.main a:link {color: blue;}

注意:link指示尚未访问的资源的链接。

下面是另一个例子：假设你希望blockquote中包含的所有b（粗体）元素的文本颜色为灰色，另外正常段落中的所有粗体文本也为灰色：

blockquote b, p b {color: gray;}

其结果是，作为段落或块引用后代的b元素中的文本会变成灰色。

关于后代选择器有一个常被忽视的方面，即两个元素之间的层次间隔可以是无限的。例如，如果写作ul em,这种语法就会选择从ul元素继承的所有em元素，而不论em的嵌套层次多深。因此，ul em将会选择以下标记中的em元素：

<ol>

<li>List item 1

<li>List item 1-3

<ol>

</ol></li>

</ol></li>

</ul>

选择网页中的子元素

在某些情况下，可能并不想选择一个任意的后代元素：而是希望缩小范围，只选择另一个元素的子元素。例如，你可能想选择只作为一个h1元素子元素（而不是后代元素）的 strong元素。为此，可以使用子结合符，即大于号（>）:

h1>strong {color: red;}

这个规则会把第一个h1下面出现的strong元素变成红色，但是第二个出现的strong 元素不受影响。

<h1>This is <strong>very</strong> important.</<h1>

<h1>This is <em>really <strong>very</strong></em> important.<h1>

如果从右向左读（译注2）[2]，选择器h1 > strong可以解释为“选择作为h1元素子元素的所有strong元素”。子结合符两边可以有空白符，这是可选的。因此，h1 > strong,h1> strong和 h1>strong都是一样的，只要你愿意，可以使用空白符，也可以忽略空白符，

查看文档的树结构时，可以很容易地看到，子选择器限制为只匹配树中直接相连的元素。

在这个树片段中，可以很容易地看出父子关系。例如，a元素是strong元素的父元素，但是它又是p元素的子元素。可以用p> a和 a>strong选择器来匹配这个片段中的元素，但是p> strong不行，因为strong是p的后代而不是其子元素。

还可以在同一个选择器中结合使用后代选择器和子选择器。因此，table.suitimary td > P会选择作为一个td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含summary的class属性。

选择相邻兄弟元素

假设你希望对一个标题后紧接着的段落应用样式，或者向一个段落后紧接着的列表指定特殊的外边距。要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟结合符（adjacentsibling combinator），这表示为一个加号（+）。与子结合符一样，相邻兄弟结合符旁边可以有空白符，这要看创作人员的喜好。

要去除紧接在一个h1元素后出现的段落的上边距，可以写作：

h1 + p {margin-top: 0;}这个选择器读作“选择紧接在一个h1元素后出现的所有段落。h1要与p元素有共同的父元素”。

为了形象地展示这个选择器是如何工作的，最容易的办法是再来考虑一个文档树的片段。

在这个片段中，div元素中包含两个列表，一个是有序列表，另一个是无序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项不是第二个列表中列表项的兄弟，因为这两组列表项的父元素不同（最多只能算堂兄弟）。

要记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。因此，如果写作li+li {font-weight: bold;}，只会把各列表中的第二个和第三个列表项变成粗体。第一个列表项将不受影响。

要想网页正常地工作，CSS要求两个元素按“源顺序”出现。在前面的例子中，ol元素后面有一个ul元素。因此可以用ol+ul选择第二个元素，但是用这个语法无法选择第一个元素。要想与ul+ol匹配有序列表必须紧跟在无序列表后面。

另外，两个元素之间的文本内容不会影响相邻兄弟结合符起作用。考虑以下标记片段，其树视图与图2-19相同：

<div>

<ol>

</ol> This is some text that is part of the 'div'.

<ul>

<li>Another list item</li>