(四)CSS选择器和派生选择器

CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式。在学习派生之前，先来了解基本的CSS选择器。前面的文章中提到过下图，选择器的位置如下所示：



CSS选择器

分为几种基本选择器：元素选择器、id选择器、类选择器、属性选择器

1.元素选择器

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

2.id选择器：为指定id的HTML元素指定样式。

#red {color:red;}
#green {color:green;}

在HTML代码中，使用

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注意：id属性只能在每个HTML文档中出现一次。

3.类选择器：为所有拥有该类的HTML元素指定样式。

.center {text-align: center}

HTML中使用：

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

4.属性选择器：为拥有指定属性的HTML元素设置样式，不仅限于class和id属性。

属性选择器是HTML5的规则。IE7以上版本并且包含！DOCTYPE时，才能使用该规则。具体规则不再赘述，因为到用到才会真正理解每一个的含义，下面表　　　　　　　 格你只要知道有这个概念，具体使用时，可点击链接查看每一项的具体含义。

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

属性选择器有以下几种常见用法：

*[title] {color:red;}/*将所有包含title的元素变为红色*/

a[href] {color:red;}/*只对有href属性的a元素应用该样式*/

a[href][title] {color:red;}/*为同时有属性href和title的a元素应用样式*/

img[alt] {border: 5px solid red;}/*所有带有alt属性的图像应用样式，从而突显这些有效的图像，这个例子更适合用来诊断而不是设计，即使用该样式来确定图像是否确实有效。*/

属性选择器在XML文档中相当有用，因为XML语言主张要针对元素和属性的用途指定元素名和属性名。

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

planet[moons] {color:red;}

　　 另外属性与属性值必须完全匹配，

<p class="important warning">This paragraph is a very important warning.</p>

p[class="important warning"] {color: red;}

选择器分组的概念前面已经提到过，就是属于同一组的样式相同不再赘述，例如：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

通配符选择器匹配所有元素，下面的例子中代表文档中的每个元素的颜色都是红色的。

* {color:red;}

CSS派生选择器

1.id选择器和派生选择器

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

上面的样式只会应用于出现在id是sidebar的元素内的段落。

2.class派生选择器

.fancy td {
color: #f60;
background: #666;
}

上述的样式是指在类名为fancy的更大的元素内的表格单元td都会以灰色背景橙色文字显示。

另外，元素也可以基于它们的类而被选择：

td.fancy {
color: #f60;
background: #666;
}

上述是指，类名为fancy的td将会带有的样式。

CSS多类选择器，将两种类名链接在一起，仅可以选择同时包含这些类名的元素，类名顺序不限。

<p class="important warning">
This paragraph is a very important warning.
</p>

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

上述两种情况，多可以用以下规则匹配：

.important.urgent {background:silver;}

但是若类名只有important或者urgent，则该规则不匹配。

类选择器和id选择器的区别：

id选择器只能在文档中使用一次，类选择器可以为任意个元素指定类。

id选择器不能结合使用，因为id属性不允许有以空格分隔的此列表。类选择器却可以多类使用。

相同的一点是，类选择器和id选择器可能是区分大小写的。

后代选择器

h1 em {color:red;}

子元素选择器

与后代元素相比，子元素选择器只能选择作为某元素子元素的元素，也就是说只能是子，不能为孙。

h1 > strong {color:red;}

相邻兄弟选择器

可以选择紧接在另一个元素后面的元素，且二者有共同的父元素。

h1 + p {margin-top:50px;}

解读为，选择紧邻h1元素后出现的段落，h1和p元素拥有共同的父元素。