欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

不:第一个孩子选择器

程序员文章站 2022-05-01 14:18:30
...

本文翻译自: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更改这些属性,您应该查看IE7IE8实现中的一些已知错误。 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) {}
相关标签: css css-selectors