Question

<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的对面。

Answer 1

使用the negation pseudo-class：

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

浏览器支持现在是very strong，但替代方案包括：

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

和

* + p { color: red; }

Answer 2

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; }
```

这两个组合器的工作方式相同;它们之间的细微差别仅适用于混合中包含其他元素的情况。有关详细信息，请参阅提供的链接。

Answer 3

我认为:nth-child()可以解决问题。

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

这样可以设置除{1}之外的所有p标记的样式，因为它从第二个子项开始。然后，您可以使用p分别设置第一个p:first-child标记的样式。

Answer 4

每次都有效，不需要撤消：

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

每个P前面都有一个P.不要设置属性以后再撤消它。你应该只添加，如果你可以帮助它，不要减去。

Answer 5

您也可以使用“代字号”（〜）运算符

<!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进行了快速测试

Answer 6

:nth-child(1n+2)对我来说很好。这将跳过第一个孩子，并继续到其余元素。

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

希望这会有所帮助。

如何跳过第一个孩子？

6 个答案: