堆栈内存溢出
  繁体   English   中英

not:first-child 选择器

[英]not:first-child selector

 原文  2012-09-05 21:09:16  5   12    css/ css-selectors

问题描述

我有一个包含多个ul标签的div标签。

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

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

但是，我以下尝试为除第一个 ul 标签之外的每个其他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 中写：“除第一个元素外的每个元素”？

12 个解决方案

解决方案1
 1639 已采纳  2012-09-05 21:11:23

您发布的版本之一实际上适用于所有现代浏览器（支持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 属性使用默认值。

解决方案2
 166  2013-03-19 21:33:05

这CSS2解决方案（“任何ul另一个之后ul ”）的作品，也和被更多的浏览器支持。

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

与:not和:nth-sibling ，IE7+ 支持相邻同级选择器。

如果您在页面加载后让JavaScript更改了这些属性，您应该查看IE7和IE8实现中的一些已知错误。 请参阅此链接。

对于任何静态网页，这应该可以完美运行。

解决方案3
 85  2013-02-22 21:07:48

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

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

因此，您选择其父元素中的每个ul ，但第一个ul除外。

有关更多nth-child示例，请参阅 Chris Coyer 的“有用的 :nth-child Recipes”文章。

解决方案4
 22  2017-08-19 16:36:14

not(:first-child)似乎不再起作用了。 至少对于较新版本的 Chrome 和 Firefox。

相反，试试这个：

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

解决方案5
 19  2014-10-16 11:10:18

div li~li {
    color: red;
}

支持IE7

解决方案6
 12  

您可以使用任何带有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
 7  2019-05-04 04:04:08

您可以将选择器与:not使用，您可以在:not()使用任何选择器

any_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*/
}

解决方案8
 4  2018-08-08 13:13:25

我对上面的一些没有运气，

这是唯一真正对我有用的

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

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

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

ul:not(:first-child)

解决方案9
 2  2021-04-28 21:53:28

您可以在“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>

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

解决方案10
 1  2019-01-24 15:19:07

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

对于内层元素，第一个解决方案非常有效。

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

等等 ...

解决方案11
 0  2020-07-22 08:13:38

li + li {
    background-color: red;
}

解决方案12
 -1  2022-04-26 15:29:19

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

也在工作

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 css选择器：第一个孩子 ：第一个孩子选择器或等值 CSS：第一个孩子选择器 第一个孩子选择器不工作 CSS：子组合选择器＆：first-child？ 嵌套列表中的第一个子选择器 CSS-第一子选择器不起作用 为什么：first-child选择器在这种情况下不起作用？ ：第一个子伪选择器不定位元素 :first-child 选择器不适用于情感 css
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM