我有一個包含幾個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寫:“每個元素，除了第一個”？
您發布的一個版本實際上適用于所有現代瀏覽器(支持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屬性的默認值。
這個CSS2解決方案(“一個ul接一個ul”)也很有效，并且被更多的瀏覽器支持。
div ul + ul {
background-color: #900;
}與:not和:n-sibling不同，IE7+支持相鄰兄弟選擇器。
如果在頁面加載后JavaScript更改了這些屬性，您應該看看IE7和IE8實現中的一些已知錯誤。見此鏈接。
對于任何靜態網頁來說，這應該是完美的。
因為:沒有什么是IE6-8不接受的，我建議你這樣做:
div ul:nth-child(n+2) {
background-color: #900;
}因此，您選擇其父元素中的每個ul，除了第一個。
參考Chris Coyer的文章“有用:第n個孩子的食譜”可以得到更多的第n個孩子的例子。
你可以用& quot第一個孩子& quot& quot中的偽類not()& quot；偽類。
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>not(:第一胎)似乎不再管用了。至少在最新版本的Chrome和Firefox上是這樣。
相反，試試這個:
ul:not(:first-of-type) {}支持IE7
您可以使用任何不帶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*/
}我在上面的一些方面運氣不好，
這是唯一一個對我有效的方法
ul:not(:類型第一){}
當我試圖讓頁面上顯示的第一個按鈕不受左邊空白選項的影響時，這種方法對我有效。
這是我第一次嘗試的選擇，但是沒有成功
ul:不是(:第一胎)
正如我使用的ul:not(:第一胎)是一個完美的解決方案。
div ul:not(:first-child) {
background-color: #900;
}為什么這是完美的，因為通過使用ul:not(:first-child)，我們可以在內部元素上應用CSS。像李，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。假設我們不能將CSS作為“div ul + ul li”應用于li。
對于內部級別的元素，第一種解決方案非常有效。
div ul:not(:first-child) li{
background-color: #900;
}等等...
這是一個簡單的方法來改變放置在基本& quotul & quot-元素，除了第一個:
請參閱:nth-child()文檔，了解有關這種工作方式的更多詳細信息。
div ul:nth-child(n+2)::after {
background-color: #900;
}也在工作