元素选择器
最基本的选择器是HTML元素。这样的选择器可以选中所有特定元素内的所有内容,修改它们的样式。
例如,假设一个选择规则为:
那么文档中的所有 <blockquote>
元素的样式都会被修改。
如果希望多个元素都可以使用同一种CSS样式,可以将它们分组。具体的做法是在选择器中将多个元素用逗号隔开:
逗号告诉浏览器它们共用同一套规则。
CSS2引入了通配选择器(universal selector),用星号 *
表示任意元素。通配选择器会代替所有可用的元素:
这样任意元素的前景色都会变成红色。
声明和关键字
声明的格式总是一个属性后面跟上一个冒号,冒号后是一个值,然后以分号结尾。冒号和分号后可以有0个或多个空白字符。
一个HTML元素只有若干特定的属性可以改变其外观。每个属性也只有一些固定的值。错误的属性或值会导致该CSS规则无效。
有的属性可以取多个值,这种情况下值之间会用空格隔开。如果一个值之间有空白符,那么整个值应该被单引号引起来:
结尾的分号是很必要的,忽略分号将可能使一条规则的属性变成另一条规则的值,导致它无效。最后一条规则也建议加上分号结尾。
类选择器
要选择某一元素中的一些特殊部分,可以使用类选择器(class selector)。为了将类选择器的样式与元素关联,必须给该元素的 class
属性一个具体的值:
要选择这类带有特定class属性的元素,只需要通过点运算符获得具有特定类的元素:
这样可以选中所有类为 warning
的 <p>
元素。
如果只关心类名而忽略是哪种元素,可以使用通配选择器 *
。这种情况下通配选择器可以省略,只需要类选择器指明特定类:
以上两种并列的选择器效果相同。
一个 class
属性中可能包含多个类,类名之间用空格分开,例如:
只要其中一个类名被类选择器选中,该类就被选中了。如果要选中同时包含这些元素的类名,需要把两个类选择器连接在一起:
注意两个类选择器之间不能有空白字符(选择器中的空白字符有特殊含义)。
“ .
”运算符的意思是包含类名,连接多个点运算符表示多次包含关系。
ID选择器
在HTML文档中, id
属性的值具有唯一性,同一个 id
的值只能出现一次。
可以使用ID选择器选中具有唯一 id
的元素。与类选择器相似,ID选择器使用sharp号“ #
”运算符连接 id
名:
ID选择器不能组合使用,因为 id
属性不允许以多个空白符分隔的 id
名。
属性选择器
如果要选择有某个属性的元素,而不论该属性的值是什么,可以使用方括号对“ []
”选中某个元素的属性名:
可以根据多个属性进行选取,通过将属性选择器连接在一起:
除了选择具有某些属性的元素,还可以只选择只有特定值的属性。其语法与HTML属性类似,在方括号对内使用 name
="
value
"
的形式:
这种形式同样支持链式选取。
如果要同时选择元素的属性和值,值的名称必须和HTML元素中的名称完全一致。如果是带有空格的值,选取时必须将包括空格在内的所有字符匹配:
这种规则下选取 class
属性也同样如此。
还可以不用精确地匹配属性值的所有字符。
在属性选择器中的等号前加上“ ~
”符号,代表匹配属性值中任意用空格分隔的词。例如:
还要一些类似的符号表示法:
[@name^="value"]
选择name
属性值以value
开头的所有元素[@name$="value"]
选择name
属性值以value
结尾的所有元素[@name*="value"]
选择name
属性值包含value
子串的所有元素
还有一种格式,比较特殊:
[@name|="value"]
这种格式会选取属性值 name
等于 value
或以 value
开头的所有元素。例如: