CSS：如何創建<li>偽元素<ul> 1級，但不在<ul> 2級？</ul></ul></li>

Question

挑戰：

• 應該為主導航ul.level_1創建一個名為li:last-child:after的偽元素
• 不應為子導航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 那些是 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>