css3 选择器 子代过滤

CSS3选择器是CSS中常用到的一个重要模块，它的出现极大地提高了开发效率。其中，子代过滤器是CSS3中选择器的一种重要形式，可以过滤在一个父节点下的所有子节点。

.parent>child {
    /*样式*/
}

上述代码是一种子代过滤器的形式，其中.parent代表父节点，child代表子节点。这个选择器只会选择指定父节点下的符合条件的子节点进行样式渲染，而不会影响其他的节点。这种选择器可以在父节点的父节点下形成一个自洽、完整的节点体系，更好地表达页面结构。

除了单一的id和tag选择器以外，子代过滤器还可以和其他的选择器进行组合，以实现更灵活的匹配方式。以下列举几种比较常见的组合形式：

.parent>.child {
    /*样式*/
}

上述代码中，加入了一个紧凑型选择器，表示只有直接子元素才会被选择。

.parent ~ .child {
    /*样式*/
}

上述代码中，加入了一个波浪型选择器，表示选中紧跟在父节点后的所有同级元素，并且选择器元素可以没有紧密联系的父节点。

.parent + .child {
    /*样式*/
}

上述代码中，加入了一个加号型选择器，表示只有在父节点紧跟着的情况下才会选择，实现与兄弟元素之间的关联。

通过这几种选择器形式的组合，我们可以实现足够复杂的选择器，以应对各种复杂的结构。