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

【问题标题】：CSS: How to create <li> Pseudo Element in <ul> Level 1, but not in <ul> Level 2?CSS：如何在 <ul> 级别 1 中创建 <li> 伪元素，而不是在 <ul> 级别 2 中？
【发布时间】：2021-05-19 14:38:47
【问题描述】：

挑战：

应该为主导航创建一个名为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 应该只存在一个正方形。该怎么做？

【问题讨论】：

标签： html css css-selectors html-lists pseudo-element

【解决方案1】：

您只需选择作为 level_1 ul 的直接子级的 li 元素。此时您正在选择任何 li，位于 ul 以下的任何级别。

见MDN:

子组合符 (>) 放置在两个 CSS 选择器之间。它只匹配第二个选择器匹配的那些元素，这些元素是第一个选择器匹配的元素的直接子元素。

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>

【讨论】：

【解决方案2】：

试试这个。编码愉快。

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

【讨论】：