CSS选择器

1.后代选择器

后代选择器就是用来创建一些规则，它们仅在某些结构起作用，而在另外一些结构中不起作用。比如，希望只对h1元素继承那些em元素的样式。可以声明一些规则，只与h1元素中包含的em元素匹配。

因此可以写作

    h1 em {color: gray;}

这个规则会吧h1元素后代的em元素文本变成灰色。其他em文本（如段落或块引用中的em）则不会被这个规则选中。

---

2.选择子元素

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

    h1>strong {color: red;}

这个规则会把第一个h1下面出现的strong元素变成红色，但是第二个出现的strong元素不受影响。

    <h1>This is <strong>very</strong> important.</h1>

    <h1>This is <em>really <strong>very</strong></em> improtant.</h1>

查看文档的树结构，可以看到，子选择器限制为只匹配树中直接相连的元素。

文档树片段

在这个树片段中，可以用p > a, a > strong 来匹配，但是 p > strong 不行。

3.选择相邻兄弟元素

可以使用相邻元素结合符(+)。

要除去紧接在h1元素后出现段落的上边距，可以写作

h1 + p { margin-top: 0;}

意思是“选择紧接在一个h1后出现的所有段落，h1与p要有共同的父元素”。