javascript - 尝试定位特定菜单项以仅更改菜单的CSS中的前四个项

您好，我一直在使用此代码来更改列表中前四个项目的css，我知道最简单的方法是通过类，但是我没有创建该网站，而使用aspx生成代码的人菜单。

在CSS中，有代码将菜单设置为向右展开

ul.menu ul ul { margin:0 0 0 10px; left:12em; }

效果很好，除了列表中的最后四个项目将从页面上展开。我想要一种使这些项目扩展到右侧并添加此代码的方法

ul.menu ul ul {margin:0 0 0 10px; left:-13.4em; right:13em;  }

除了现在它们全部都移到右边之外，哪个效果很好。我试图找到一种方法来将前四个项目设置为原始CSS，并将后四个项目设置为新的CSS。

到目前为止我尝试过的

CSS中的测试类

.test{margin:0 0 0 10px; left:12em;}


jQuery("ul.menu ul ul").children().filter(function (index, element) { return index <= 3; }).addClass("test");


var first_four = function(index, element){return index <= 3;};
jQuery("ul.menu").filter(first_four).children("ul").children("ul").addClass("test");

jQuery("ul.menu ul").filter(first_four).children("ul").addClass("test");

但是这些似乎不起作用... jquery是否不喜欢ul.menu ul ul样式？我可以解决这个问题并仍然瞄准那些作品吗？

导航图像http://imgur.com/zGUhrz3

HTML代码http://jsfiddle.net/Lzwkjc3m/

最佳答案

您可以使用nth-child选择器，在许多实现（See MDN docs here）中，选择器可以像这样组合：

定位到父级的前四个元素

element:nth-child(-n + 4)

也许：

定位到第五个元素以上

element:nth-child(n + 5)

Sample working example

所以...

然后，就您而言，也许可以解决您的问题：

ul.menu ul ul { margin:0 0 0 10px; left:12em; }
ul.menu ul ul:not(:nth-child(-n + 4)) {margin:0 0 0 10px; left:-13.4em; right:13em;  }

除了前四个项目外，这将更改右侧的对齐方式。