我有一个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:“每个元素，除了第一个”?
当前回答
我在上面的一些问题上没有运气，
这是唯一一个对我有效的方法
ul:没有(first-of-type) {}
当我试图让页面上显示的第一个按钮不受左距选项的影响时，这对我来说是有效的。
这是我第一次尝试的选择，但没有成功
ul:没有(第一个孩子)
其他回答
div ul::nth-child(n+2){
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)){}
div li~li {
color: red;
}
支持IE7
你可以在"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>
这些是处理这种情况的一些最好的方法。
你发布的一个版本实际上适用于所有现代浏览器(支持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属性的默认值。
