CSS 如何跳过第一个孩子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2855679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to skip first child?
提问by Jitendra Vyas
<div id="main">
<p> one </p>
<p> two </p>
<p> three </p>
<p> four </p>
<p> five </p>
<div>
I don't want to apply css on first <p>One</p>
我不想先应用 css <p>One</p>
p {color:red}
I need just opposite of :first-child.
我需要正好相反:first-child。
回答by Quentin
With the negation pseudo-class:
使用否定伪类：
p:not(:first-child) { color: red; }
Browser support is very strongnow, but alternatives include:
浏览器支持现在非常强大，但替代方案包括：
p { color: red; }
p:first-child { color: black; }
and:
和：
* + p { color: red; }
回答by BoltClock
Quentin's :not()solution works great for modern browsers:
Quentin 的:not()解决方案非常适合现代浏览器：
p:not(:first-child) { color: red; }
His alternative for older browsers also works well, except it makes use of an overriding rule for the first child. It's not required, however...
他对旧浏览器的替代方案也很有效，只是它对第一个孩子使用了覆盖规则。这不是必需的，但是...
You can simply use a sibling selector to apply the same rule as the one above, without the need to override it for p:first-child. Either one of these rules will work:
您可以简单地使用同级选择器来应用与上述相同的规则，而无需为p:first-child. 这些规则之一将起作用：
The adjacent sibling selector, which matches any
pthat comes directly after ap:p + p { color: red; }The general sibling selector, which matches any
pthat comes anywhere after ap:p ~ p { color: red; }
Both combinators work identically here; the subtle differences between them only apply when you have other elements in the mix. Refer to the links provided for details.
两个组合器在这里的工作方式相同；它们之间的细微差别仅在您混合使用其他元素时才适用。有关详细信息，请参阅提供的链接。
回答by jjgarza
I think :nth-child()will do the trick.
我认为:nth-child()会做的伎俩。
p:nth-child(n+2){
background-color:red;
}
This styles all of the ptags except for the first because it starts on the 2nd child. You could then style the first ptag separately with p:first-child.
这对p除第一个之外的所有标签进行样式设置，因为它从第二个孩子开始。然后，您可以使用p单独设置第一个标签的样式p:first-child。
回答by Rudie
Works everytime and doesn't need undoing:
每次都有效，不需要撤消：
p + p {
/* do 15 special things */
}
It takes every P that was preceded by a P. Don't set a property to undo it later. You should only add, if you can help it, not subtract.
它需要前面有一个 P 的每个 P。不要设置一个属性来稍后撤消它。你应该只加，如果你能帮助它，而不是减。
回答by MonteCristo
You can also use "tilde" ( ~ ) operator
您还可以使用“波浪号”( ~ ) 运算符
<!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>
Here is the JSFiddle demo http://jsfiddle.net/RpfLa/344/
这是 JSFiddle 演示http://jsfiddle.net/RpfLa/344/
Did a quick test on FF 17, Chrome 23, Safari 5.1, IE9, IE1-8 on compaitbility mode
对 FF 17、Chrome 23、Safari 5.1、IE9、IE1-8 的兼容性模式进行了快速测试
回答by Alfredo Barillas
:nth-child(1n+2)worked well for me. This skips the first child and continues to the rest of the elements.
:nth-child(1n+2)对我来说效果很好。这将跳过第一个子元素并继续其余元素。
p:nth-child(1n+2){
color: red;
}
Hope this helps.
希望这可以帮助。
