时间戳

首页 > 解决方案 > :first-child 嵌套元素

css - :first-child 嵌套元素

问题描述

我想了解为什么 li:first-child 的目标是第一个 li (CHILD 1) 及其孩子 (GRANDCHILD 1.1, GRANDCHILD 1.2, GRANDCHILD 1.3) 但关于其他 li 孩子 (CHILD 2 和 CHILD 3) 仅针对它的第一个孩子（GRANDCHILD 2.1 和 GRANDCHILD 3.1）

HTML

<body>
    <ul>
      PARENT
      <li>CHILD 1
        <ul>
          <li>GRANDCHILD 1.1</li>
          <li>GRANDCHILD 1.2</li>
          <li>GRANDCHILD 1.3</li>
        </ul>
      </li>
      <li>CHILD 2
        <ul>
          <li>GRANDCHILD 2.1</li>
          <li>GRANDCHILD 2.2</li>
          <li>GRANDCHILD 2.3</li>
        </ul>
      </li>
      <li>CHILD 3
        <ul>
          <li>GRANDCHILD 3.1</li>
          <li>GRANDCHILD 3.2</li>
          <li>GRANDCHILD 3.3</li>
        </ul>
      </li>
    </ul>
  </body>

CSS

li:first-child {
  background: chartreuse;
}

标签： csscss-selectors

解决方案

如果你添加border: 1px solid red;它会告诉你答案。

li:first-child {
  background: chartreuse;
  border: 1px solid red;
}

在这里查看：https ://codepen.io/riiad/pen/dyppZdY

推荐阅读