CSS 子代选择器(>)

后代选择器

后代选择器^?是一种多个用空格分隔的选择器，别称包含选择器。范围是当前节点的所有子节点，包括其直接子节点。

div#app下的所有 div 元素都使用下面的样式：

div#app div {
  border: 4px solid #00B7FF;
}

如下图，后代选择器使得div#app节点下所有的 div 都使用了该样式：

在第二个 div 之后再加一个 div，效果又是怎样的呢？

div#app div div {
  border: 4px solid #bbd6e0;
}

如下图，多了一个子节点 div，div#app下的第一层子节点都没有使用样式：

综上所述，规定[]N中括号代表元素名称或元素标识（id、class），N 代表层数。假如[div]1 [div]2 ... [div]N，那么后代选择器的规则是：只有[div]N以及其下所有都是[div]的节点才使用样式。

子代选择器

规定[]N中括号代表元素名称或元素标识，N 代表层数。假如[div]1 > [div]2 ... [div]N，那么子代选择器的规则是：[div]N-1 > [div]N，只有[div]N这一层的所有[div]节点才使用样式。

简单来说，子代选择器的范围比后代选择器的范围小太多，其范围是当前节点的直接子节点：

div#app > div {
  border: 4px solid #00B7FF;
}

如下图，只有 items-1 和 items-2 使用了该样式：