not：第一个孩子选择器

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

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

1208927 次浏览
小开
最佳答案

您为所有现代浏览器发布的实际工作版本之一（其中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属性使用默认值。

小开

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

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

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

请参阅Chris Coyer的"有用的：第n个孩子的食谱"文章，了解更多nth-child示例。

小开

这个CSS2解决方案（“在另一个ul之后的任何ul”）也可以工作，并且受到更多浏览器的支持。

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

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

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

对于任何静态网页，这应该可以完美地工作。

小开 
div li~li {color: red;}

支持IE7

小开

not(:first-child)似乎不再起作用了。至少在Chrome和Firefox的最新版本中是这样。

相反，试试这个： 

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

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

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

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

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

这是我第一次尝试的选择，但它不起作用

ul:not(:first-child)

小开

正如我使用的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;}

等等…

小开

您可以将任何选择器与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)){}
小开

您可以使用您的选择器与: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*/}
小开 
li + li {background-color: red;}
小开

您可以在“not（）”伪类中使用“第一个孩子”伪类。

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. 使用“n个孩子（）”，它将选择第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>

这些是处理这种情况的一些最好的方法。

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

也起作用了


提交答案