乐闻世界logo
搜索文章和话题

CSS 如何使用 notfirst 子选择器

3个答案

1
2
3

not:first-child 选择器在CSS中是一个结合了伪类选择器 :not():first-child 的用法。它的主要用途是选择那些不是其父元素的第一个子元素的元素。

下面是一个使用 :not(:first-child) 选择器的例子:

假设我们有以下HTML结构:

html
<ul> <li>第一个列表项</li> <li>第二个列表项</li> <li>第三个列表项</li> </ul>

我们希望选中第一个列表项以外的所有列表项,并为它们应用样式。我们可以在CSS中这样做:

css
li:not(:first-child) { color: red; }

这个规则会将第二个和第三个列表项的文本颜色设置为红色,而第一个列表项保持默认的颜色。

使用 :not(:first-child) 选择器的好处是我们可以直接指定我们不想选中的元素(在这个例子中是第一个子元素),而不需要分别为其他元素设置样式。这种方法提高了我们的代码的可读性和维护性。

2024年6月29日 12:07 回复

由于IE6-8:not不接受,我建议你这样做:

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

因此,您选择ul其父元素中_除第一个元素之外的_所有元素。

有关更多示例,请参阅 Chris Coyer 的**“有用的:nth-​​child Recipes”**文章。nth-child

2024年6月29日 12:07 回复

not(:first-child)似乎不再起作用了。至少在最新版本的 Chrome 和 Firefox 中是这样。

相反,试试这个:

shell
ul:not(:first-of-type) {}
2024年6月29日 12:07 回复

你的答案