css - not:first-child 选择器

Question

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

score 1712 · Accepted Answer

您发布的版本之一实际上适用于所有现代浏览器（支持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 属性使用默认值。

score 168 · Accepted Answer

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

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

与:notand不同:nth-sibling，IE7+ 支持相邻兄弟选择器。

如果您在页面加载后让JavaScript更改这些属性，您应该查看IE7和IE8实现中的一些已知错误。请参阅此链接。

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

score 87 · Accepted Answer

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

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

ul所以你在它的父元素中挑选每个，除了第一个。

有关更多示例，请参阅 Chris Coyer 的“有用的 :nth-child 食谱”文章。nth-child

score 25 · Accepted Answer

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

相反，试试这个：

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

score 22 · Accepted Answer

22

div li~li {
    color: red;
}

支持IE7

于 2014-10-16T11:10:18.553 回答

score 16 · Accepted Answer

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

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

score 14 · Accepted Answer

您可以使用任何选择器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)){}

score 7 · Accepted Answer

您可以使用您的选择器，: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*/
}

score 4 · Accepted Answer

上面的一些我没有运气，

这是唯一对我有用的

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

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

这是我首先尝试的选项，但没有奏效

ul:not(:first-child)

score 2 · Accepted Answer

正如我使用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。假设我们不能将 CSS 应用li为 `div ul + ul li'。

对于内部级别元素，第一个解决方案完美运行。

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

等等 ...

score 1 · Accepted Answer

1

li + li {
    background-color: red;
}

于 2020-07-22T08:13:38.543 回答

css - not:first-child 选择器

11 回答 11

Related

Reference