973

我有一个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 编写:“每个元素,除了第一个元素”?

4

11 回答 11

1712

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

于 2012-09-05T21:11:23.177 回答
168

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

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

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

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

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

于 2013-03-19T21:33:05.643 回答
87

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

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

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

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

于 2013-02-22T21:07:48.580 回答
25

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

相反,试试这个:

ul:not(:first-of-type) {}
于 2017-08-19T16:36:14.297 回答
22
div li~li {
    color: red;
}

支持IE7

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

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

替代方式,

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

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

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

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

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

于 2021-04-28T21:53:28.527 回答
14

您可以使用任何选择器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)){}
于 2019-03-25T09:11:00.213 回答
7

您可以使用您的选择器,: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*/
}
于 2019-05-04T04:04:08.240 回答
4

上面的一些我没有运气,

这是唯一对我有用的

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

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

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

ul:not(:first-child)

于 2018-08-08T13:13:25.940 回答
2

正如我使用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;
    }

等等 ...

于 2019-01-24T15:19:07.987 回答
1
li + li {
    background-color: red;
}
于 2020-07-22T08:13:38.543 回答