不:第一个孩子选择器

时间: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 3supported):

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