不：第一个孩子选择器

时间：2012-09-05 21:09:17

标签： css css-selectors

我有div标记，其中包含多个ul标记。

我只能为第一个ul标记设置CSS属性：

div ul:first-child {
    background-color: #900;
}

但是，我以下尝试为除第一个之外的其他ul标记设置CSS属性不起作用：

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

如何用CSS编写：“每个元素，除了第一个”？

11 个答案:

答案 0 :(得分：1185)

您为所有现代浏览器发布actually works的其中一个版本（其中CSS selectors level 3为supported）：

div ul:not(:first-child) {
    background-color: #900;
}

如果您需要支持旧版浏览器，或者受:not选择器limitation（它只接受simple selector作为参数）的阻碍，那么您可以使用其他技术：

定义一个比你想要的范围更大的规则，然后有条件地“撤销”它，将其范围限制在你想要的范围内：

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

限制范围时，请为您设置的每个CSS属性使用default value。

答案 1 :(得分：144)

此CSS2解决方案（“ul之后的任何ul”也适用，并且受到更多浏览器的支持。

div ul + ul {
  background-color: #900;
}

与:not和:nth-sibling不同，IE7 +支持adjacent sibling selector。

如果您有 JavaScript 在页面加载后更改这些属性，您应该查看 IE7 和 IE8 实现中的一些已知错误这个。 See this link

对于任何静态网页，这应该是完美的。

答案 2 :(得分：70)

由于 IE6-8 不接受:not，我建议您这样做：

div ul:nth-child(n+2) {
    background-color: #900;
}

所以你选择其父元素中的每个ul除了第一个。

有关更多nth-child "Useful :nth-child Recipes"的信息，请参阅Chris Coyer的 examples 文章。

答案 3 :(得分：15)

div li~li {
    color: red;
}

支持IE7

答案 4 :(得分：8)

rbegin()似乎不再起作用了。至少使用最新版本的Chrome和Firefox。

相反，试试这个：

not(:first-child)

答案 5 :(得分：3)

我在上述某些方面没有运气，

这是唯一真正为我工作的人

ul:not(:first-of-type) {}

当我尝试使页面上显示的第一个按钮不受左空白选项影响时，这对我有用。

这是我首先尝试的选项，但是没有用

ul:not(:first-child)

答案 6 :(得分：3)

您可以将任何选择器与not

一起使用 
p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

答案 7 :(得分：2)

您可以在“not()”伪类中使用“first-child”伪类。

div ul:not(:first-child){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

替代方法，

  1. 使用“nth-child()”，它将选择第 n 个孩子。

div ul:not(:nth-child(1)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

  1. 使用“nth-of-type()”，它将选择它的第n个元素 父母。 

    div ul:not(:nth-of-type(1)){
    background-color: #900;
}
    <html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

  2. 使用“nth-last-child()”，它将选择从最后一个孩子开始计数的第n个孩子。如果你有 4 个“ul”标签，你可以这样写。

div ul:not(:nth-last-child(4)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

  1. 使用“nth-last-of-type()”，它将选择从最后一个子元素开始计数的其父元素的第n个元素。如果你有 4 个“ul”标签，你可以这样写。

div ul:not(:nth-last-of-type(4)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

这些是处理此类情况的一些最佳方法。

答案 8 :(得分：0)

我曾经使用ul:not(:first-child)是一个完美的解决方案。

div ul:not(:first-child) {
    background-color: #900;
}

为什么这是完美的，因为通过使用ul:not(:first-child)，我们可以将CSS应用于内部元素。像li, img, span, a标签等。

但是当使用其他解决方案时：

div ul + ul {
  background-color: #900;
}

和

div li~li {
    color: red;
}

和

ul:not(:first-of-type) {}

和

div ul:nth-child(n+2) {
    background-color: #900;
}

这些仅限制ul级CSS。假设我们无法将CSS作为{div ul + ul li'应用于li。

对于内部级别元素，第一个解决方案可以完美运行。 

div ul:not(:first-child) li{
        background-color: #900;
    }

以此类推...

答案 9 :(得分：0)

您可以将选择器与:not结合使用，例如，可以在:not()内部使用任何选择器

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

答案 10 :(得分：0)

li + li {
    background-color: red;
}
相关问题
最新问题