首页 网络技术
  1. 正文

CSS类选择器分为什么及怎么用

(1)单类选择器

单纯的元素选择器似乎还过于粗糙了,比如我们希望在文档中突出加粗显示某种重要的内容,例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中,或者它可能出现在多种不同的元素中。这个时候,我们可以考虑使用类选择器(class selector)。

要使用类选择器我们需要首先对文件元素添加一个class属性,比如截至日期可能会出现在以下元素中:

<pclass="deadline">...</p>

<h3 class="deadline">...</h3>

这样我们就可以用以下方式使用类选择器了:

p.deadline { color: red;}

h3.deadline { color: red;}

点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h3元素。而其余包含该属性的元素则不会被选中。

如果我们省略.deadline前面的元素名,那么所有包含该类的元素都将被选中:

.deadline { color: red;}

通常情况下,我们会组合使用以上2者得到更加有趣的样式:

.deadline { color: red;}

span.deadline { font-style: italic;}

以上代码首先会对所有的包含deadline的元素字体设置为红色,同时会对span元素中的文本添加额外的斜体效果。这样,如果你希望某处文本拥有额外的斜体效果将它们放在<span></span>中就可以了。

(2)多类选择器

在实践的做法中,元素的calss属性可能不止包含一个单词,而是一串单词,各个单词之间用空格隔开。

比如某些元素包含一个”warning”类,某些元素包含一个”important”类,某些元素同时包含”warning important”类。属性名出现的顺序没有关系:

class = "warning important"

class = "important warning"

以上2者是等价的。我们希望包含warning类的元素有一个醒目的红色字体,包含important属性的元素有一个加粗的字体显示,而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了),我们可以使用以下的css代码:

.warning { color: red;}

.important { font-weight: bold;}

.warning.important { background: blue;}

当然,第三条你也可以写成: .important.warning { background: blue;} 和词序没有关系。说明一下,.warning会匹配所有包含warning属性的元素,不管该元素还包含多少其他的属性。.important同理。而.important.warning会匹配所有同时包含以上2种属性的元素,不管该元素还包含多少其他的类,也不管他们在类列表中出现的顺序,只要其中含有这2个属性,则会被选择进来!

同样地,多于多类选择器,在前面加上元素名,则会匹配包含指定类名的指定元素,例如:p.warning.important {}

将会匹配同时包含warning和important属性的p元素,其他同样包含以上2类的元素则不会被选中。

本文标题:CSS类选择器分为什么及怎么用
本文链接:https://www.qqooo.cn/post/6839.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!