CSS2学习笔记02

基础选择器

系列文章

元素选择器

最基本的选择器是HTML元素。这样的选择器可以选中所有特定元素内的所有内容，修改它们的样式。

例如，假设一个选择规则为：

blockquote {
    font-style: italic;
}

那么文档中的所有 <blockquote> 元素的样式都会被修改。

如果希望多个元素都可以使用同一种CSS样式，可以将它们分组。具体的做法是在选择器中将多个元素用逗号隔开：

blockquote, p {
    font-family: 'Times New Roman', Times, serif;
}

逗号告诉浏览器它们共用同一套规则。

CSS2引入了通配选择器(universal selector)，用星号 * 表示任意元素。通配选择器会代替所有可用的元素：

* { color: red; }

这样任意元素的前景色都会变成红色。

声明和关键字

声明的格式总是一个属性后面跟上一个冒号，冒号后是一个值，然后以分号结尾。冒号和分号后可以有0个或多个空白字符。

一个HTML元素只有若干特定的属性可以改变其外观。每个属性也只有一些固定的值。错误的属性或值会导致该CSS规则无效。

有的属性可以取多个值，这种情况下值之间会用空格隔开。如果一个值之间有空白符，那么整个值应该被单引号引起来：

font-family: 'Times New Roman', Times, serif;

结尾的分号是很必要的，忽略分号将可能使一条规则的属性变成另一条规则的值，导致它无效。最后一条规则也建议加上分号结尾。

类选择器

要选择某一元素中的一些特殊部分，可以使用类选择器(class selector)。为了将类选择器的样式与元素关联，必须给该元素的 class 属性一个具体的值：

<p class="warning">This may be troubling.</p>

要选择这类带有特定class属性的元素，只需要通过点运算符获得具有特定类的元素：

p.warning {
    color: red;
}

这样可以选中所有类为 warning 的 <p> 元素。

如果只关心类名而忽略是哪种元素，可以使用通配选择器 * 。这种情况下通配选择器可以省略，只需要类选择器指明特定类：

*.warning, .warning {
    color:red;
}

以上两种并列的选择器效果相同。

一个 class 属性中可能包含多个类，类名之间用空格分开，例如：

<a class="warning info">deprecated</a>

只要其中一个类名被类选择器选中，该类就被选中了。如果要选中同时包含这些元素的类名，需要把两个类选择器连接在一起：

.warning.info {
    background: yellow;
}

注意两个类选择器之间不能有空白字符（选择器中的空白字符有特殊含义）。

“ . ”运算符的意思是包含类名，连接多个点运算符表示多次包含关系。

ID选择器

在HTML文档中， id 属性的值具有唯一性，同一个 id 的值只能出现一次。

可以使用ID选择器选中具有唯一 id 的元素。与类选择器相似，ID选择器使用sharp号“ # ”运算符连接 id 名：

em#user165 {
    color: red;
    background-color: yellow;
}

ID选择器不能组合使用，因为 id 属性不允许以多个空白符分隔的 id 名。

属性选择器

如果要选择有某个属性的元素，而不论该属性的值是什么，可以使用方括号对“ [] ”选中某个元素的属性名：

a[href] {
    color: blue;
}

可以根据多个属性进行选取，通过将属性选择器连接在一起：

img[src][alt] {
    border: 2px;
}

除了选择具有某些属性的元素，还可以只选择只有特定值的属性。其语法与HTML属性类似，在方括号对内使用 name="value" 的形式：

a[target="_self"] {
    background-color: silver;
}

这种形式同样支持链式选取。

如果要同时选择元素的属性和值，值的名称必须和HTML元素中的名称完全一致。如果是带有空格的值，选取时必须将包括空格在内的所有字符匹配：

p[title="Test Page"] {
    color:silver;
}

这种规则下选取 class 属性也同样如此。

还可以不用精确地匹配属性值的所有字符。

在属性选择器中的等号前加上“ ~ ”符号，代表匹配属性值中任意用空格分隔的词。例如：

strong[class~="highlight"] {
    color: red;
}

还要一些类似的符号表示法：

还有一种格式，比较特殊：

这种格式会选取属性值 name 等于 value 或以 value 开头的所有元素。例如：

p[lang|="en"] {
    font-family: 'Times New Roman', Times, serif;
}