html - 选择列表的第一个 child 而不包括孙子

Question

我有以下代码，我想选择 first child 元素的 first child 以蓝色显示，最后一个子元素 第四个 child 穿红色衣服。
不过孙子也是这样选的，老二的 child 。第一个孙子以蓝色出现，而其他孙子以红色出现。有没有办法只选择 child 而不包括孙子？
如果有任何不清楚的地方，请在下面评论，我会尽快回复。
提前致谢。

.parent > ul > li > ul
{
  display:none;
}
.has_children:hover > ul
{
  display:block;
}
.parent > ul :first-child
{
  color:blue;
}
.parent > ul :last-child
{
  color:red;
}

<div class = "parent">
<ul>
  <li>first child</li>
  <li class = "has_children">second child
  <ul>
    <li>first grand child</li>
    <li>second grand child</li>
    <li>third grand child</li>
  </ul>
  </li>
  <li>third child</li>
  <li>fourth child</li>
</ul>
</div>

Answer 1

尝试:

.parent > ul > li:first-child
{
  color:blue;
}
.parent > ul > li:last-child
{
  color:red;
}

这样，您将选择第一个 li 和最后一个 li，它们直接位于 的子 ul 中。父级 div.

CHECK IT OUT