如何使用 not:first-child 选择器？

问题描述 投票：0回答：13

我有 

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中编写：“每个元素，除了第一个”？

html css css-selectors
13个回答
1888
投票

您发布的版本之一实际上适用于所有现代浏览器（其中支持 CSS 选择器级别 3）： div ul:not(:first-child) { background-color: #900; } 

如果您需要支持旧版浏览器，或者您受到
:not

选择器

限制
的阻碍（它只接受简单选择器作为参数），那么您可以使用另一种技术： 定义一个比您想要的范围更大的规则，然后有条件地“撤销”它，将其范围限制在您想要的范围内：

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

限制范围时，请为您设置的每个 CSS 属性使用
默认值

。

179
投票
ul

接着另一个

ul
”）也可以工作，并且得到更多浏览器的支持。
div ul + ul { background-color: #900; } 

与
:not

和

:nth-sibling
不同，IE7+支持
相邻兄弟选择器
。 如果您在页面加载后使用

JavaScript

更改了这些属性，则应该查看 IE7 和 IE8 实现中的一些已知错误。 请参阅此链接。 对于任何静态网页，这应该可以完美工作。

97
投票
:not

不被

IE6-8
接受，我建议你这样做： div ul:nth-child(n+2) { background-color: #900; } 

因此，您选择其父元素中的每个
ul

，除了第一个

。
请参阅 Chris Coyer 的

“有用的：第 n 个孩子的食谱”

文章了解更多nth-child 示例

。

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

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>




替代方法，




使用“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>






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

  1. 

    

    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>
    

    

    

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

  2. 

    





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>






使用“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>




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

    





      

      
      
      

      

        

          

            

              
27
投票

              
            

          

        

        
 似乎不再起作用了。至少在最新版本的 Chrome 和 Firefox 中是这样。 



相反，试试这个：



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


    


div li~li {
    color: red;
}


      

      
      
      

      

        

          

            

              
22
投票

              
            

          

        

        
支持IE7
    




您可以使用任何带有 

      

      
      
      

      

        

          

            

              
16
投票

              
            

          

        

        
 的选择器


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)){}


    


您可以将选择器与 

      

      
      
      

      

        

          

            

              
9
投票

              
            

          

        

        
 一起使用，如下所示，您可以使用 
:not()
 中的任何选择器

any_CSS_selector:not(any_other_CSS_selector):not(any_other_CSS_selector){
    /*YOUR STYLE*/
}





您也可以在没有父选择器的情况下使用
:not
。


   :not(:nth-child(2)){
        /*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*/
}


    


我在上面的一些方面没有运气，

      

      
      
      

      

        

          

            

              
4
投票

              
            

          

        

        
这是唯一真正对我有用的



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



当我试图让页面上显示的第一个按钮不受左边距选项影响时，这对我有用。 



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



ul:not(:first-child)

    


正如我所使用的那样，

      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
是一个完美的解决方案。



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。假设我们不能在 
li
 上应用 CSS 作为 `div ul + ul li'。



对于内部关卡元素，第一个解决方案效果很好。


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



等等...
    




li + li {
    background-color: red;
}


      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        


这是更改基本“ul”元素之后放置的元素背景颜色的简单方法，第一个元素除外：

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
有关其工作原理的更多详细信息，请参阅 
:nth-child()
 文档。

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

    


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


      

      
      
      

      

        

          

            

              
-2
投票

              
            

          

        

        
也在工作
    





      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.