如何在CSS中选择特定元素的多个嵌套实例？

/* 选择所有直接嵌套在 .parent 元素内部的 .child 元素 */
.parent > .child {
  /* 样式规则 */
}

/* 选择所有嵌套在 .parent 元素内部的 .child 元素 */
.parent .child {
  /* 样式规则 */
}

/* 选择所有 .parent 元素内部的 .child 元素，并且这些 .child 元素是 .grandchild 元素的父元素 */
.parent > .child > .grandchild {
  /* 样式规则 */
}

/* 选择所有 .parent 元素内部的第一个 .child 元素 */
.parent > .child:first-child {
  /* 样式规则 */
}

/* 选择所有 .parent 元素内部的最后一个 .child 元素 */
.parent > .child:last-child {
  /* 样式规则 */
}

/* 选择所有 .parent 元素内部的 .child 元素，这些 .child 元素具有 data-type 属性 */
.parent > .child[data-type] {
  /* 样式规则 */
}

<div class="parent">
  <div class="child">
    <div class="grandchild">Grandchild 1</div>
  </div>
  <div class="child">
    <div class="grandchild">Grandchild 2</div>
  </div>
</div>

/* 选择所有直接嵌套在 .parent 元素内部的 .child 元素 */
.parent > .child {
  background-color: lightblue;
}

/* 选择所有嵌套在 .parent 元素内部的 .grandchild 元素 */
.parent .grandchild {
  color: red;
}

/* 选择所有 .parent 元素内部的第一个 .child 元素 */
.parent > .child:first-child {
  border: 1px solid black;
}