CSS2学习笔记03

选择后代结点

基于HTML文档树，可以使用后代选择器(descendant selector)，或称包含选择器、上下文选择器(contextual selector)。

定义后代选择器的用途是创建只能在HTML某些部分起作用，其余部分不起作用的规则。这样可以使HTML结构更清晰。
在一个后代选择器中，选择器包含多个用空格分隔的子选择器。例如：

p em {
    color: gray;
}

选择器之间的是一种结合符(combinator)，表示“……结构中的……”。

注意，使用逗号“ , ”隔开的多个选择器都是从根结点开始计算的，即后代选择器的优先级高于逗号选择器。

有一点很重要：后代选择器的前后两个结点可以是不连续的，即两个元素之间的结点深度可以是无限的，不论嵌套层次有多深。

有时候不需要选择所有后代结点，只需要选择深一级的子结点。

此时，可以使用子结合符“ > ”，即大于号：

p > strong {
    color: red;
}

子结合符的作用范围只有所有的一级子结点，与当前结点在DOM树中直接相连。

要对该结点的同一级结点应用某些样式，可以使用相邻兄弟结合符(adjacentsibling combinator)，表现为加号“ + ”。

相邻兄弟结合符可以选中所有同级结点中符合规则的。例如：

h1 + p {
    margin-top: 0;
}

可以去除所有与 <h1> 同级的 <p> 元素的外边距。

该选择器读作：选择紧接在一级标题后面的所有段落， <h1> 与 <p> 元素有共同的父元素。

注意：相邻兄弟结合符不会选中左侧的元素，即便它可能也符合右侧的选取规则。也就是说：

li + li {
    font-weight: bold;
}

只会将所有列表项的第二个及以后变为粗体。相邻兄弟结合符的左侧元素作为定位标志，右侧元素将在剩余的项中选取。

这些选择去的优先级都比逗号选择器高，逗号选择器会从根本上分隔开它们。