在“新建css样式”对话框中可用的选择器有哪四种
最常用的四种选择器是:元素选择器、类选择器、ID选择器、派生选择器
1、元素选择器
最常见的css选择器当属元素选择器了,在HTML文档中该选择器通常是指某种HTML元素,例如:p,h2,span,a,div乃至html。
例如:
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时添加灰色背景;对文档中所有h2元素添加红色背景。
通过上面的例子也可以看出css的基本规则结构:由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为:属性名 : 属性值。如下图所示:
每条声明以分号”;”结尾。如果在一个声明中使用了不正确的属性值,或者不正确的属性,则该条声明会被忽略掉。另外请注意不要忘记每条声明后面的分号。
我们也可以同时对多个html元素进行声明:
h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}
这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。如果我们希望一锅粥地选取所有的元素,可以使用通配符”*”: * { font-size: 20px;}
这样所有的元素都将被选中,虽然font-size属性对于某些元素是无效的,那么它将被忽略。
2、类选择器
(1)单类选择器
单纯的元素选择器似乎还过于粗糙了,比如我们希望在文档中突出加粗显示某种重要的内容,例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中,或者它可能出现在多种不同的元素中。这个时候,我们可以考虑使用类选择器(class selector)。-css样式
要使用类选择器我们需要首先对文件元素添加一个class属性,比如截至日期可能会出现在以下元素中:
《p class=“deadline“》...《/p》
《h2 class=“deadline“》...《/h2》
这样我们就可以用以下方式使用类选择器了:
p.deadline { color: red;}
h2.deadline { color: red;}
点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。
如果我们省略.deadline前面的元素名,那么所有包含该类的元素都将被选中:
.deadline { color: red;}
通常情况下,我们会组合使用以上2者得到更加有趣的样式:
.deadline { color: red;}
span.deadline { font-style: italic;}
以上代码首先会对所有的包含deadline的元素字体设置为红色,同时会对span元素中的文本添加额外的斜体效果。这样,如果你希望某处文本拥有额外的斜体效果将它们放在《span》《/span》中就可以了。-c
(2)多类选择器
在实践的做法中,元素的calss属性可能不止包含一个单词,而是一串单词,各个单词之间用空格隔开。
比如某些元素包含一个”warning”类,某些元素包含一个”important”类,某些元素同时包含”warning important”类。属性名出现的顺序没有关系:
class = “warning important“
class = “important warning“
以上2者是等价的。我们希望包含warning类的元素有一个醒目的红色字体,包含important属性的元素有一个加粗的字体显示,而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了),我们可以使用以下的css代码:-css样式
.warning { color: red;}
.important { font-weight: bold;}
.warning.important { background: blue;}
当然,第三条你也可以写成: .important.warning { background: blue;} 和词序没有关系。说明一下,.warning会匹配所有包含warning属性的元素,不管该元素还包含多少其他的属性。.important同理。而.important.warning会匹配所有同时包含以上2种属性的元素,不管该元素还包含多少其他的类,也不管他们在类列表中出现的顺序,只要其中含有这2个属性,则会被选择进来!-c
同样地,多于多类选择器,在前面加上元素名,则会匹配包含指定类名的指定元素,例如:p.warning.important {}
将会匹配同时包含warning和important属性的p元素,其他同样包含以上2类的元素则不会被选中。
3、ID选择器
ID选择器和类选择器有些类似,但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类,一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次,也就是一个ID只能唯一标识一个元素(不是一类元素,而是一个元素)。类似类属性,在使用ID选择器前首先要在元素中添加ID属性,例如:-css样式
《p id=“top-para“》...《/p》
《p id=“foot-para“》...《/p》
使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如:
#top-para {} #foot-para {};
这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性,也使其用法变得相对简单。
4、属性选择器
属性选择器在css2中引入,使我们可以根据元素的属性及属性值来选择元素。下面分别来说明:
(1)简单属性选择器
简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为: 元素名[属性名] 或 *[属性名]。比如我们希望选择带有alt属性的所有img元素: img[alt] { ...}
选择带有title属性的所有元素:*[title] { ...}。同类选择器类似,我们也可以根据多个属性信息进行选择,例如同时拥有href和title的a元素:
a[href][title] { ...}
组合使用类选择器使我们的选择更加富于灵活性。
(2)具体属性值选择器
如果我们希望更加精确地根据属性值来选择元素,我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为