not:first-child 选择器

Posted 2023-03-06

技术标签:

【中文标题】not:first-child 选择器【英文标题】：not:first-child selector 【发布时间】：2012-08-30 16:04:18 【问题描述】：

我有一个 div 标签，其中包含多个 ul 标签。

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

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

但是，我以下尝试为彼此设置 CSS 属性 ul 标签除了第一个不起作用：

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

【问题讨论】：

【参考方案1】：

您为所有现代浏览器发布的actually works 版本之一（其中CSS selectors level 3 是supported）：

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

如果您需要支持旧版浏览器，或者如果您受到:not 选择器的limitation 的阻碍（它只接受simple selector 作为参数），那么您可以使用另一种技术：

定义一个范围比你想要的更大的规则，然后有条件地“撤销”它，将其范围限制在你想要的范围内：

div ul 
    background-color: #900;  /* applies to every ul */


div ul:first-child 
    background-color: transparent; /* limits the scope of the previous rule */

在限制范围时，为您设置的每个 CSS 属性使用 default value。

【讨论】：

您知道哪些版本不支持此功能吗？ @Simon_Weaver：在实践中，除了 IE caniuse.com。 Hmm.. 注意第一个解决方案的限制：caniuse.com/#feat=css-not-sel-list 第二个对我来说听起来更合理。谢谢！ @iorrah 您的 caniuse 链接用于选择器列表，是的，支持仍然非常有限。 OP 没有使用选择器列表。所以我认为https://caniuse.com/#feat=css-sel3 更适合IE8 之后的大力支持。即使在 chrome 的开头没有 div 元素也可以使用。【参考方案2】：

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

div ul + ul 
  background-color: #900;

与:not 和:nth-sibling 不同，IE7+ 支持adjacent sibling selector。

如果您有 JavaScript 在页面加载后更改这些属性，您应该查看 IE7 和 IE8 实现中的一些已知错误这。 See this link.

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

【讨论】：

@Leven：quirksmode link 说它应该可以在 IE7 中工作，但只能是静态的。如果您的 JS 在其前面放置另一个元素，则它可能无法正确更新。这是你看到的问题吗？可能值得注意的是，在一系列元素中，例如：ul ul div ul（这些元素是兄弟元素），只会选择第二个 ul，因为最后一个没有 ul自己之前【参考方案3】：

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

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

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

有关更多信息，请参阅 Chris Coyer 的 "Useful :nth-child Recipes" 文章nth-childexamples。

【讨论】：

2019年谁还用IE6-8？考虑到答案是 2013 年的？【参考方案4】：

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

相反，试试这个：

ul:not(:first-of-type)

【讨论】：

它们都有效，但含义不同。 ul:not(:first-child) 的字面意思是“任何不是其父元素的第一个子元素的 ul 元素”，因此如果它前面有另一个元素（p、标题等），它甚至不会匹配第一个 ul。相反，ul:not(:first-of-type) 表示“容器中除第一个ul 之外的任何ul 元素”。您说得对，OP 可能需要后一种行为，但您的解释颇具误导性。【参考方案5】：

div li~li 
    color: red;

支持 IE7

【讨论】：

【参考方案6】：

您可以使用任何带有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】：

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

替代方法，

使用“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>

使用“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>

使用“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>

使用“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>

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

【讨论】：

【参考方案8】：

您可以将选择器与: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*/

【讨论】：

【参考方案9】：

上面的一些我没有运气，

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

ul:not(:first-of-type)

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

这是我第一次尝试的选项，但没有成功

ul:not(:first-child)

【讨论】：

【参考方案10】：

正如我使用的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】：

li + li 
    background-color: red;

【讨论】：

以上是关于not:first-child 选择器的主要内容，如果未能解决你的问题，请参考以下文章

css3有没有除第一个子元素以外的元素的选择器

css选择器位置和数量技巧

使用 ":not" 和 ".not()" 选择器之间的性能差异？

将非选择器添加到样式会破坏样式

CSSCSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )