如何跳过第一个孩子?

<div id="main"> <p> one </p> <p> two </p> <p> three </p> <p> four </p> <p> five </p> <div> 

我不想在第<p>One</p>上应用css

 p {color:red} 

我需要对面的:first-child

用否定的伪类 :

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

浏览器支持现在非常强大 ,但其他select包括:

 p { color: red; } p:first-child { color: black; } 

和:

 * + p { color: red; } 

Quentin's :not()解决scheme适用于现代浏览器:

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

他对于旧版浏览器的替代scheme也很有效,除了它为第一个孩子使用重写规则。 这不是必需的 ,但是…

您可以简单地使用兄弟select器应用与上面相同的规则,而不必为p:first-child覆盖它。 这些规则中的任何一个都可以工作:

  • 相邻的兄弟select器 ,匹配任何直接在p

     p + p { color: red; } 
  • 一般的兄弟select器 ,它匹配任何在p

     p ~ p { color: red; } 

两个组合器在这里工作相同。 它们之间的细微差别仅适用于混合中有其他元素的情况。 请参阅提供的链接了解详细信息。

我想:nth-child()会做的伎俩。

 p:nth-child(n+2){ background-color:red; } 

这样的样式除了第一个以外,都是由第二个孩子开始的。 您可以使用p:first-child分别devise第一个p标签。

每次工作,不需要撤消:

 p + p { /* do 15 special things */ } 

它需要P之前的每个P。不要以后设置属性来撤消它。 你应该只添加,如果你能帮助它,不要减去。

您也可以使用“波浪号”(〜)运算符

 <!DOCTYPE html> <html> <head> <style> p ~ p { background:#ff0000; } </style> </head> <body> <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> </body> </html> 

这里是JSFiddle演示http://jsfiddle.net/RpfLa/344/

在兼容模式下对FF 17,Chrome 23,Safari 5.1,IE9,IE1-8进行了快速testing