我查了几个博客,但找不到问题的答案。也许你可以。
在第一个ul
(使用课程.first
)中,必须为每个li
应用不同的背景。所以我想使用伪元素来学习如何使用它们。我更改了每个li
元素的选择器编号。我不得不使用:after
,因此我可以使用位置absolute
移动图像背景。我用过这个CSS:
> ul li:nth-child(1) a:hover:after
> ul li:nth-child(2) a:hover:after
etc
为了使这更加棘手,第二个ul
(类.dropdown)需要具有与li
中的ul.first
不同的背景。但li
中所有ul.dropdown
的背景都相同。我只是添加了一个背景,然后开始出现问题,我得到了ul.first
的背景。我希望CSS仅定位li
的{{1}},因此我可以单独定位ul.first
这是html:
ul.dropdown
答案 0 :(得分:1)
您的选择器以:
开头ul li
在ul中选择 all li。由于“下拉列表”中的li也在“第一个”ul中,因此它们也会成为您的规则的目标。
要仅选择直接位于第一个内部的li,您可以使用
ul > li
仅选择作为ul的直接子项的li。
但是,“下拉列表”也是一个ul,因此这条规则仍然适用于两者。相反,直接定位第一个ul,然后直接定位它的孩子:
.first > li:nth-child(1) a:hover:after
etc..