我如何使用不是：第一个孩子的选择器？

513

我有div标签包含几个ul标签。我如何使用不是：第一个孩子的选择器？

如果我想只为第一ul标签设置CSS属性，此代码的工作：

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

当我想为除第一各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; 
}

但没有效果。我如何写CSS：“每个元素，除了第一个”？

来源

2012-09-05 RIKI

李：不是（：第一胎） – zloctb

886

其中一个版本的您发布actually works所有现代浏览器（其中CSS selectors level 3是supported）：

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

如果您需要支持旧的浏览器，或者如果你被:not选择的limitation受阻（只有它接受一个simple selector作为参数），那么你可以使用另一种技术：

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

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

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

限制范围时，请为您设置的每个CSS属性使用default value。

来源

2012-09-05 21:11:23 Jon

@OTARIKI：其实'：没有（：第一胎）'工作 - 请看看更新。 – Jon

Ups，由于某种原因，这在我的Chrome中无法正常工作（首先我只在Chrome中测试这段代码），现在我在其他的browsres和代码工作中测试了这一点。问题解决了，谢谢:) – RIKI

你知道这个版本不支持哪个版本吗？ –

好，因为:not不受IE6〜8接受，我会建议你：

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

等你拿在它的父元素每ul除了第一个。

参考Chris Coyer的"Useful :nth-child Recipes" article for more nth-childexamples。

来源

2013-02-22 21:07:48 ed1nh0

实际上它应该是（n + 2）以获得第二个元素并且继续AKA跳过第一个元素 – stuyam

@Yamartino是对的，应该是n + 2，将很好地得到这个答案编辑。 –

@ ed1nk0我编辑了你的答案来纠正选择器，如果我已经在这里颠覆了你的意图，请随时回滚:)否则，+1 - 这是选择除第一个元素之外的所有元素的最佳方法。 – jammypeach

126

此CSS2解决方案（“任何ul之后的另一个ul”）也适用，并且受更多浏览器支持。

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

不同于:not和:nth-sibling，所述adjacent sibling selector由IE7 +支持。

如果你有的JavaScript在页面加载后改变这些特性，你应该看看在IE7和本IE8实现一些已知的bug。 See this link。

对于任何静态网页，这应该是完美的。

来源

2013-03-19 21:33:05

“+”选择器在IE7中似乎不起作用。 – Leven

@Leven：[quirksmode链接]（http://www.quirksmode.org/css/selectors/）表示它应该在IE7中工作，但只能静态地工作。如果你的JS在它前面放置了另一个元素，它可能无法正确更新。这是你看到的问题吗？ –

可能值得注意的是，在一系列元素如：ul ul div ul（其中这些元素是兄弟元素）中，只有第二个ul会被选中，因为最后一个ul没有在自身之前的“ul” –

div li~li { 
    color: red; 
}

支持IE7

来源

2014-10-16 11:10:18 zloctb

not(:first-child)似乎不工作了。至少在最新版本的Chrome和Firefox中。

相反，试试这个：

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

来源

2017-08-19 16:36:14

他们都工作，但他们有不同的含义。 'ul：not（：first-child）'意思是“任何不是它的父项的第一个子元素的ul元素”，所以即使第一个'ul'前面有另一个元素也不会匹配（'p '，标题等）。相反，'ul：not（：first-of-type）'意味着“任何'ul'元素，除了容器中的第一个'ul'”。你说得对，OP可能需要后者的行为，但你的解释颇具误导性。 –

我如何使用不是：第一个孩子的选择器？

回答

相关问题