如何跳过第一个孩子？

Question

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

我不想先申请css <p>One</p>

p {color:red}

我需要正好相反:first-child.

Answer 1

用否定伪类:

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

浏览器支持现在非常强大,但替代方案包括:

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

和:

* + p { color: red; }

Answer 2

Quentin的:not()解决方案适用于现代浏览器:

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

他对旧版浏览器的替代方案也很有效,除了它为第一个孩子使用了一个重要的规则.但这不是必需的 ......

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

• 在相邻的兄弟选择器,它匹配任何p之后的直接来到p:

  p + p { color: red; }
  

• 在一般兄弟选择,它匹配任何p这之后的任何地方来p:

  p ~ p { color: red; }
  

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

Answer 3

我认为:nth-child()会做到这一点.

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

这样可以设置p除第一个标记之外的所有标记的样式,因为它从第二个子标记开始.然后,您可以p单独设置第一个标签的样式p:first-child.

Answer 4

每次都可以工作,不需要撤消:

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

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