不：第一个孩子选择器

本文翻译自：not:first-child selector

I have a div tag containing several ul tags. 我有一个包含几个ul标签的div标签。

I'm able to set CSS properties for the first ul tag only: 我只能为第一个ul标签设置CSS属性：

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

However, my following attempts to set CSS properties for each other ul tag except the first one don't work: 但是，我以下尝试为除第一个之外的其他每个ul标记设置CSS属性不起作用：

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

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

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

How can I write in CSS: "each element, except the first"? 我怎么能写CSS：“每个元素，除了第一个”？

---

#1楼

参考：https://stackoom.com/question/pZ9R/不-第一个孩子选择器

---

#2楼

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的限制 （它只接受一个简单的选择器作为参数），那么您可以使用另一种技术：

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属性的默认值 。

---

#3楼

Since :not is not accepted by IE6-8 , I would suggest you this: 既然:not 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 . 有关更多nth-child 例子，请参阅Chris Coyer的“有用的：n-child Recipes”一文。

---

#4楼

This CSS2 solution ("any ul after another ul ") works, too, and is supported by more browsers. 这个CSS2解决方案（“任何ul after ul ”）也可以使用，并且得到更多浏览器的支持。

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

Unlike :not and :nth-sibling , the adjacent sibling selector is supported by IE7+. 与:not和: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. 如果在页面加载后有JavaScript更改这些属性，您应该查看IE7和IE8实现中的一些已知错误。 See this link . 看到这个链接 。

For any static web page, this should work perfectly. 对于任何静态网页，这应该是完美的。

---

#5楼

div li~li {
    color: red;
}

Supports IE7 支持IE7

---

#6楼

not(:first-child) does not seem to work anymore. not(:first-child)似乎不再工作了。 At least with the more recent versions of Chrome and Firefox. 至少使用最新版本的Chrome和Firefox。

Instead, try this: 相反，试试这个：

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