如何使用not:first-child selector?

I have div tag containing several ul tags.

我有包含几个ul标签的div标签。

If I trying set CSS properties only for the first ul tag, and this code works:

如果我尝试为第一个ul标记设置CSS属性，这段代码可以工作:

div ul:first-child {
    background-color: #900;
}

When I want set CSS properties for each ul tag except the first, I tried this:

当我想为每个ul标签设置CSS属性时，除了第一个，我尝试了:

div ul:not:first-child {
    background-color: #900;
}

also this:

也:

div ul:not(:first-child) {
    background-color: #900;
}

and this:

这:

div ul:first-child:after {
    background-color: #900;
}

But to no effect. How must I write in CSS: "each element, except the first"?

但毫无效果。我必须如何在CSS中写:“每个元素，除了第一个元素”?

5 个解决方案

#1

953

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

您发布的一个版本实际上适用于所有现代浏览器(支持CSS选择器第3级):

div ul:not(:first-child) {
    background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

如果您需要支持遗留浏览器，或者由于:not selector的限制(它只接受一个简单的selector作为参数)而受阻，那么您可以使用另一种技术:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

定义一个比你想要的范围更大的规则，然后有条件地“撤销”它，将它的范围限制在你想要的范围内:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.

当限制范围时，为正在设置的每个CSS属性使用默认值。

#2

130

This CSS2 solution ("any ul after another ul") works, too, and is supported by more browsers.

这个CSS2解决方案(“在另一个ul之后的任何ul”)也可以工作，并且得到了更多浏览器的支持。

div ul + ul {
  background-color: #900;
}

Unlike :not and :nth-sibling, the adjacent sibling selector is supported by IE7+.

不像:不是和:nth-sibling，相邻的兄弟选择器由IE7+支持。

If you have JavaScript changes these properties after the page loads, you should look at some known bugs in the IE7 and IE8 implementations of this. See this link.

如果JavaScript在页面加载后更改了这些属性，那么您应该看看IE7和IE8实现中一些已知的bug。看到这个链接。

For any static web page, this should work perfectly.

对于任何静态的web页面，这应该可以完美地工作。

#3

Well since :not is not accepted by IE6~8, I would suggest you this:

既然:不被IE6~8所接受，我建议你:

div ul:nth-child(n+2) {
    background-color: #900;
}

So you pick every ul in its parent element except the first one.

所以除了第一个元素，你在它的父元素中选择每个ul。

Refer to Chris Coyer's "Useful :nth-child Recipes" article for more nth-child examples.

请参阅Chris Coyer的“有用的:第n个孩子的食谱”文章，了解更多第n个孩子的例子。

#4

div li~li {
    color: red;
}

Supports IE7

支持IE7

#5

not(:first-child) does not seem to work anymore. At least with the more recent versions of Chrome and Firefox.

第一个孩子似乎不再起作用了。至少是最新版本的Chrome和火狐浏览器。

Instead, try this:

相反,试试这个:

ul:not(:first-of-type) {}

#1

953