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元素拥有共同的父元素。