CSS: 如何在 <ul> 级别 1 而不是在 <ul> 级别 2 中创建 <li> 伪元素？

Question

挑战：

应该为主导航创建一个名为 li:last-child:after 的伪元素 ul.level_1
不应为子导航创建伪元素ul.level_2

编码：

ul {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

a {
  display: block;
  width: 100px; height: 50px;
  color: white;
  background-color: orange;
}

/*Creating the pseudo element */
li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 50px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

/*Creating the desired actions for main navigation li childs 1 to 5*/
li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);}
li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);}
li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);}
li:nth-child(4):hover ~ li:last-child:after { transform: translatex(400px);}
li:nth-child(5):hover:last-child:after { transform: translatex(500px);}

<div>
   <ul class="level_1">
      <li class="sibling"><a href="#">Parent 1</a></li>
      <li class="sibling"><a href="#">Parent 2</a></li>
      <li class="sibling"><a href="#">Parent 3</a></li>
      <li class="submenu sibling">
         <ul class="level_2">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
            <li><a href="#">Sub 3</a></li>
        </ul>
      </li>
      <li class="sibling"><a href="#">Parent 5</a></li>
   </ul>
</div>

问题: 如您所见，目前有两个红色方块在移动。相反，应该只存在一个 ul.level_1 的正方形。如何操作？

Answer 1

试试这个。编码愉快。

ul.level_1 > li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 100px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

Answer 2

您只需要 select 那些 li 元素，它们是 level_1 ul 的直接子元素。目前您正在 selecting 任何 li，低于 ul 的任何级别。

参见MDN：

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

ul {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

a {
  display: block;
  width: 100px; height: 50px;
  color: white;
  background-color: orange;
}

/*Creating the pseudo element */
ul.level_1 > li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 50px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

/*Creating the desired actions for main navigation li childs 1 to 5*/
li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);}
li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);}
li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);}
li:nth-child(4):hover ~ li:last-child:after { transform: translatex(400px);}
li:nth-child(5):hover:last-child:after { transform: translatex(500px);}

<div>
   <ul class="level_1">
      <li class="sibling"><a href="#">Parent 1</a></li>
      <li class="sibling"><a href="#">Parent 2</a></li>
      <li class="sibling"><a href="#">Parent 3</a></li>
      <li class="submenu sibling">
         <ul class="level_2">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
            <li><a href="#">Sub 3</a></li>
        </ul>
      </li>
      <li class="sibling"><a href="#">Parent 5</a></li>
   </ul>
</div>

CSS: 如何在 <ul> 级别 1 而不是在 <ul> 级别 2 中创建 <li> 伪元素？

CSS: How to create <li> Pseudo Element in <ul> Level 1, but not in <ul> Level 2?

html

css

css-selectors

html-lists

pseudo-element