代码之家 › 专栏 › 技术社区 › Jitendra Vyas

如何跳过第一个孩子?

css-selectors css

Jitendra Vyas · 技术社区 · 15 年前

<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 .

5 回复 | 直到 9 年前

Quentin 9 年前

用 the negation pseudo-class :

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

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

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

还有:

* + p { color: red; }

BoltClock 13 年前

昆廷 :not() 解决方案非常适合现代浏览器:

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

除了对第一个子浏览器使用覆盖规则外,他对旧浏览器的替代也很好。它不是 必修的 但是…

您只需使用同级选择器来应用与上述规则相同的规则,而无需为其重写 p:first-child . 这些规则中的任何一个都有效:

这个 adjacent sibling selector ,与任何 p 就在 磷 :
```
p + p { color: red; }
```
这个 general sibling selector ,与任何 磷 在一个 磷 :
```
p ~ p { color: red; }
```

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

jjgarza 11 年前

我想 :nth-child() 会成功的。

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

这是所有 p 标签,除了第一个,因为它从第二个孩子开始。你可以先做一个 磷 单独标记 p:first-child .

Rudie 12 年前

每次都有效,不需要撤销:

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

它需要前面有p的每个p。以后不要设置属性来撤消它。你应该只加,如果你能帮助它,而不是减。

MonteCristo 12 年前

也可以使用“tilde”(~)运算符

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

推荐文章