伪选择n-child tweeking

时间:2013-09-17 15:15:23

标签: css html5 css3 css-selectors pseudo-class

我查了几个博客,但找不到问题的答案。也许你可以。

在第一个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

1 个答案:

答案 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..