常用的重要选择器规则：

element,element div,p 选择所有 div 元素和所有 p 元素。
element element div p 后代选择器：选择 div 元素内部的所有 p 元素。
element>element div>p 子选择器：选择父元素为 div 元素的所有 p 元素。
element+element div+p 第一个子元素选择器：选择紧接在 div 元素之后的所有 p 元素。

后代选择器

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。 举例来说，如果你希望只对 h1 元素中的 em 元素应用样式，可以这样写：

1

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

1
2

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。 因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

关于后代选择器有一个常被忽略的方面，即两个元素之间的层次间隔可以是无限的。例如，如果写作ul em，这个语法就会选择从u1元素继承的所有em元素，而无论em的嵌套层次有多深。

子选择器

某些情况下，可能并不想选择一个任意的后代元素，而是希望缩小范围，只选择另一个元素的子元素（不是所有后代元素）。可以使用子结合符，即大于号(>)

1

h1 > strong {color: red;}

特殊性

如果有多个选择器都满足同一个元素，即冲突了，怎么知道哪一个规则更强？

答案在于每个选择器的特殊性。对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加在规则中的各个声明。如果一个元素有两个或者多个冲突的属性声明，那么有最高特殊性的声明就会胜出。

选择器的特殊性由选择器本身的组件确定。特殊性表述为4个部分，0,0,0,0

1.对于选择器中给定的各个ID属性，加 0,1,0,0 2.对于选择器中给定的各个类元素，属性选择器或伪类，加 0,0,1,0 3.对于选择器中给定的各个元素和伪元素，加0,0,0,1 4.结合符和通配选择器对特殊性没有任何贡献

1
2
3
4
5
6

h1 {color: red;} 0,0,0,1
p em {color: purple;} 0,0,0,2
.grape {color: purple} 0,0,1,0
*.bright {color: yellow} 0,0,1,0
p.bright em.dark {color: maroon} 0,0,2,2
div#sidebar *[href] {color: silver} 0,1,1,1

第五条规则强于第二条

0011 > 0001 0101 > 0017

内联样式的特殊性 我们已经见过以0开头的特殊性，所以你可能会奇怪为什么会有这些特殊性。一般地，第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高，内联样式的特殊性是1,0,0,0

!important 重要性规则

有时某个声明可能非常重要，超过了所有其他声明。CSS2.1称之为重要声明，并允许在这些声明的结束分号之前插入!important来标识。

1

p.dark {color: #333 !important; background: white;}

必须正确地放置!important，否则声明将无效，它应该总是放在声明的最后，即分号之前。如果一个属性的值包含多个关键字，则必须放在最后一个关键词的后面，比如font：sss,sss !important;

标志位!important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。实际上，所有!important声明会分组在一起，重要声明的特殊性冲突会在重要声明内部解决，而不会与非重要声明相混肴。类似的，非重要声明也归为一组，使用特殊性来解决冲突。如果一个重要声明和一个非重要声明冲突，胜出的总是重要声明。

1.《css权威指南》