CSS权威指南(第四版)读书笔记——第2章 选择符之类选择符和ID选择符

前端技术 everyinch 838℃ 0评论

除了直接使用文档中的元素之外,还可以使用类选择符和ID选择符,这样便能以一种独立于元素的方式赋予样式。这两种选择符可以独立使用,也可以和元素选择符结合在一起使用。

2.3.1类选择符

应用样式而不关心所涉及的元素,最常使用类选择符。然后,在使用之前,要修改文档的标记,让类选择符起作用。修改方式是设定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属性的元素赋予样式。在CSS中,选择类的句法是在class属性的值前面加上点号(.)。除了单独选择类之外,还可以结合元素选择符。

.warning {font-weight: bold;}

图2-6:使用类选择符

可以看出,类选择符直接引用元素的class属性值,而且前面始终有个点号(.),表明这是类选择符。这个点号把类选择符与可能一起使用的其他选择符(例如元素选择符)分开。例如,你可能想让整段文字都为提醒时才加粗:

p.warning {font-weight: bold;}

这个选择符现在匹配class属性的值中包含warning的p元素,其他任何元素,不管有没有这个类,都不匹配。

如果想为那个span元素赋予不同的样式,可以使用span.warning选择符,

p.warning {font-weight: bold;}

span.warning {font-style: italic;}

此时,提醒段落显示为粗体,而起提醒作用的span元素显示为斜体。

此外,还可以先使用通用的类选择符定义一个样式,然后再结合元素选择符,进一步指明适用的元素,如下所示:

.warning {font-style: italic;}

span.warning {font-weight: bold;}

结果如图2-7所示。

图2-7:结合通用和特指的选择符定义样式

此时,所有提醒文字都将显示为斜体,但只有class属性的值为warning的span元素才会显示为粗斜体。

2.3.2多个类

前一节中的class属性只有一个词。根据HTML规范,class属性的值可以是多个词,词之间使用空格分隔。比如你想把某个元素标记为特别重要的提醒,可以这么写:

<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 accomplished by keeping the various masses separate.</p>

词的顺序无关紧要,写成warning urgent也行,结果是完全一样的。

假如你想让class属性的值为warning的元素显示为粗体,值为urgent的元素显示为斜体,而同时拥有二者的元素具有银色背景,样式可以这样写:

.warning {font-weight: bold;}

.urgent {font-style: italic;}

.warning.urgent {background: silver;}

把两个类选择符串在一起,选择的是同时具有两个类名的元素,而且对类名的顺序没有要求。

如果多个串联的类选择符包含class属性中没有的词,将无法匹配。试看下面这个规则:

p.warning.help {background: red;}

不出所料,这个选择符匹配的是class属性中同时包含warning和help的p元素。因此,无法匹配class属性中只有warning或urgent的p属性。

图2-8:使用多个类名选择元素

2.3.3 ID选择符

ID选择符在某些方面类似于类选择符,不过二者之间有些重要区别。首先,ID选择符的开头不是点号,而是个散列字元(#,也叫井号、哈希符号、哈希记号或三连棋棋盘。因此,你可能见过类似下面的规则:

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

第二个区别是,ID选择符引用的不是class属性的值,而是id属性的值(显而易见)。下面举个例子:

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

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

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

与类选择符一样,ID选择符中的通用选择符也可以省略。前面的示例还可以写成这样:

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

这样写与之前的效果一样。

ID选择符还有一个地方与类选择符相似:ID选择符不关心所用的元素。

2.3.4在类选择符和ID选择符之间选择

如前所示,类可以赋予任意个元素,warning这个类名赋予了p元素和span元素,此外还可以赋予更多的元素。而ID就不同了,在一个HTML文档中,一个ID能且只能使用一次。因此,如果文档中有个元素的id属性值为lead-para,其他元素的id属性就不能再设为这个值。

与类选择符不同,ID选择符不能串在一起使用,因为ID属性的值不能是以空格分隔的列表。

类选择符和ID选择符之间的另一个区别是,用户代理判断该把哪个样式应用到元素上时,ID选择符的权重更高。

此外还要注意,类选择符和ID选择符可能是区分大小写的,这取决于文档语言。根据HTML,规范,类和ID的值是区分大小写的,因此类选择符和ID选择符的大小写必须与文档中的一致。

单纯从句法的角度来说,点号加类名的写法(如.Warning)无法保证一定能用于XML文档。写作本书时,点号加类名的写法支持HTML、SVG和MathML;此外,还可能支持未来出现的语言,不过这取决于各语言的规范。井号加ID的写法(如#lead)支持任何能确保文档内元素唯一性的文档语言。

分享&收藏

转载请注明:陈童的博客 » CSS权威指南(第四版)读书笔记——第2章 选择符之类选择符和ID选择符

喜欢 (2)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
'; } if( dopt('d_footcode_b') ) echo dopt('d_footcode'); ?>