我有一个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:“每个元素，除了第一个”?
当前回答
Not (:first child)似乎不再起作用了。至少最新版本的Chrome和Firefox是这样的。
相反，试试这个:
ul:not(:first-of-type) {}
其他回答
正如我使用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;
}
and
div li~li {
color: red;
}
and
ul:not(:first-of-type) {}
and
div ul:nth-child(n+2) {
background-color: #900;
}
这些只限制ul级别的CSS。假设我们不能将CSS应用于li作为' div ul + ul li'。
对于内部关卡元素，第一个解决方案非常有效。
div ul:not(:first-child) li{
background-color: #900;
}
等等……
这个CSS2解决方案(“任意ul接另一个ul”)也可以工作，并且得到更多浏览器的支持。
div ul + ul {
background-color: #900;
}
与:not和:n -sibling不同，相邻兄弟选择器被IE7+支持。
如果在页面加载后JavaScript更改了这些属性，那么您应该查看IE7和IE8实现中的一些已知错误。请看这个链接。
对于任何静态网页，这应该工作得很好。
由于:not不被IE6-8所接受，我建议你这样做:
div ul:nth-child(n+2) {
background-color: #900;
}
所以你选择了父元素中的每个ul，除了第一个。
参考Chris Coyer的“有用的:第n个孩子的食谱”一文，了解更多关于第n个孩子的例子。
你可以在"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>
替代方法,
使用"n -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>
With "nth-of-type()", It will select nth number of element of its parent. 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> With "nth-last-child()", It will select nth number of child counting from the last child. If you have 4 "ul" tags, you can write like this.
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>
这些是处理这种情况的一些最好的方法。
Not (:first child)似乎不再起作用了。至少最新版本的Chrome和Firefox是这样的。
相反，试试这个:
ul:not(:first-of-type) {}
