<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 正好相反。
【问题讨论】：
标签： css css-selectors
p:not(:first-child) { color: red; }
浏览器支持现在是very strong，但替代方案包括：
p { color: red; }
p:first-child { color: black; }
和：
* + p { color: red; }
【讨论】：
p:first-child{ color:inherit; } 而不是p:first-child{ color:black; }，因此它适用于任何预设颜色。
Quentin 的 :not() 解决方案非常适合现代浏览器：
p:not(:first-child) { color: red; }
他对旧浏览器的替代方案也很有效，除了它对第一个孩子使用了一个覆盖规则。这不是必需的，但是...
您可以简单地使用同级选择器来应用与上述相同的规则，而无需为p:first-child 覆盖它。这些规则中的任何一个都可以使用：
adjacent sibling selector，匹配任何紧跟在p 之后的p：
p + p { color: red; }
general sibling selector，匹配任何出现在p 之后的任何p：
p ~ p { color: red; }
两个组合器在这里的工作方式相同；它们之间的细微差别仅适用于混合中包含其他元素的情况。有关详细信息，请参阅提供的链接。
【讨论】：
我认为:nth-child() 可以解决问题。
p:nth-child(n+2){
background-color:red;
}
这会设置所有p 标记的样式，但第一个标记除外，因为它从第二个孩子开始。然后，您可以使用p:first-child 单独设置第一个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 进行了快速测试
【讨论】：
P匹配了5次。
:nth-child(1n+2) 对我来说效果很好。这会跳过第一个子元素并继续到其余元素。
p:nth-child(1n+2){
color: red;
}
希望这会有所帮助。
【讨论】：