Html CSS：如何创建<；李>；中的伪元素<；ul>；级别1，但不在<；ul>；二级？

挑战：

• 应该为主导航创建一个名为

  li:last child:after

  的伪元素

  ul.level_1

• 不应为次导航

  ul.level_2

---

编码：

ul{
显示器：flex；
宽度：最大含量；
列表样式：无；
填充：0；
保证金：0自动；
}
a{
显示：块；
宽度：100px；高度：50px；
颜色：白色；
背景颜色：橙色；
}
/*创建伪元素*/
李：最后一个孩子：之后{
内容：''；
位置：绝对位置；
顶部：100px；左侧：50px；
宽度：50px；高度：50px；
背景色：红色；
转变：转变1s；
}
/*为主导航li childs 1到5创建所需的操作*/
li:n子级（1）：悬停~li:last子级：在{transform:translatex（100px）；}之后
li:n子级（2）：悬停~li:last子级：在{transform:translatex（200px）；}之后
li:n子级（3）：悬停~li:last子级：在{transform:translatex（300px）；}之后
li:n子级（4）：悬停~li:last子级：在{transform:translatex（400px）；}之后
li:n子级（5）：悬停：最后一个子级：在{transform:translatex（500px）；}之后

试试这个。快乐编码

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

---

试试这个。快乐编码

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

---

您只需要选择那些li元素，它们是级别_1 ul的直接子元素。目前，您正在选择ul以下任何级别的任何li

见：

子组合符（>）位于两个CSS选择器之间。它只匹配第二个选择器匹配的元素，这些元素是第一个选择器匹配的元素的直接子元素

ul{
显示器：flex；
宽度：最大含量；
列表样式：无；
填充：0；
保证金：0自动；
}
a{
显示：块；
宽度：100px；高度：50px；
颜色：白色；
背景颜色：橙色；
}
/*创建伪元素*/
ul.level_1>li：最后一个孩子：之后{
内容：''；
位置：绝对位置；
顶部：100px；左侧：50px；
宽度：50px；高度：50px；
背景色：红色；
转变：转变1s；
}
/*为主导航li childs 1到5创建所需的操作*/
li:n子级（1）：悬停~li:last子级：在{transform:translatex（100px）；}之后
li:n子级（2）：悬停~li:last子级：在{transform:translatex（200px）；}之后
li:n子级（3）：悬停~li:last子级：在{transform:translatex（300px）；}之后
li:n子级（4）：悬停~li:last子级：在{transform:translatex（400px）；}之后
li:n子级（5）：悬停：最后一个子级：在{transform:translatex（500px）；}之后

您只需要选择那些li元素，它们是级别1 ul的直接子元素。目前，您正在选择ul以下任何级别的任何li

见：

子组合符（>）位于两个CSS选择器之间。它只匹配第二个选择器匹配的元素，这些元素是第一个选择器匹配的元素的直接子元素

ul{
显示器：flex；
宽度：最大含量；
列表样式：无；
填充：0；
保证金：0自动；
}
a{
显示：块；
宽度：100px；高度：50px；
颜色：白色；
背景颜色：橙色；
}
/*创建伪元素*/
ul.level_1>li：最后一个孩子：之后{
内容：''；
位置：绝对位置；
顶部：100px；左侧：50px；
宽度：50px；高度：50px；
背景色：红色；
转变：转变1s；
}
/*为主导航li childs 1到5创建所需的操作*/
li:n子级（1）：悬停~li:last子级：在{transform:translatex（100px）；}之后
li:n子级（2）：悬停~li:last子级：在{transform:translatex（200px）；}之后
li:n子级（3）：悬停~li:last子级：在{transform:translatex（300px）；}之后
li:n子级（4）：悬停~li:last子级：在{transform:translatex（400px）；}之后
li:n子级（5）：悬停：最后一个子级：在{transform:translatex（500px）；}之后