CSS通过直接子级选择器应用样式

CSS中的直接子级选择器（CSS direct child selector）用于选择某个元素下的直接子元素，并为其应用样式。

使用大于号（>）来表示直接子级选择器，其语法如下：

parent > child {
  /* 样式规则 */
}

其中，parent表示父元素，child表示子元素。

例子

比如我们有如下HTML结构：

<div class="parent">
  <p>这是父元素中的段落1。</p>
  <div>
    <p>这是第一个子元素中的段落。</p>
  </div>
  <p>这是父元素中的段落2。</p>
  <p>这是父元素中的段落3。</p>
  <div>
    <p>这是第二个子元素中的段落。</p>
  </div>
</div>

现在，如果我们想要选择父元素中所有直接子元素中的段落，可以使用直接子级选择器：

.parent > p {
  color: red;
}

上面的样式规则将应用于父元素中直接子级元素中的所有段落元素，即“这是父元素中的段落1。”和“这是父元素中的段落2。”和“这是父元素中的段落3。”，但不包括子元素中的段落“这是第一个子元素中的段落。”和“这是第二个子元素中的段落。”

总结

直接子级选择器是一种非常有用的CSS技巧，它可以帮助我们轻松选择某个元素下的所有直接子元素，并为其应用样式。无论是在响应式设计还是一般设计中，都可以应用这种选择器。