Css3 - 第一个孩子和最后一个孩子选择器问题

Question

我在编写第一个和最后一个子选择器时遇到问题。

首先，我想删除父导航菜单中最后一个子节点的右边框（不是下拉菜单），我当前的代码也会影响下拉菜单。我在移除第一个孩子的左边界方面遇到了同样的问题。

其次，我想在父导航菜单的左侧和右侧添加一个框阴影，但这也会影响到下拉菜单。

我希望得到一些关于我哪里出错的建议。感谢

我的CSS3代码是：

 ul#navmenu li:last-child a  {border-right: none;}

 ul#navmenu li:first-child a {border-left: none;}

 ul#navmenu li:last-child {box-shadow: 200px 0px 0px 0px white;}

 ul#navmenu li:first-child {box-shadow:-200px 0px 0px 0px white;}

Answer 1

使用ul访问直接子选择器的>元素的直接子元素

 ul#navmenu > li:last-child a  {border-right: none;}

 ul#navmenu > li:first-child a {border-left: none;}

 ul#navmenu > li:last-child {box-shadow: 200px 0px 0px 0px white;}

 ul#navmenu > li:first-child {box-shadow:-200px 0px 0px 0px white;}

您当前的选择器为ul#navmenu li，这意味着选择li下可以处于任何级别深度的所有ul个标记。

但是此选择器ul#navmenu > li将选择仅限制为ul#navmenu的直接孩子，而就是您需要的。