How can i use a notfirst child selector

1 年前提问

7 个月前修改

浏览次数69次

6个答案

not:first-child 选择器在CSS中是一个结合了伪类选择器 :not() 和 :first-child 的用法。它的主要用途是选择那些不是其父元素的第一个子元素的元素。

下面是一个使用 :not(:first-child) 选择器的例子：

假设我们有以下HTML结构：

html
<ul>
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ul>

我们希望选中第一个列表项以外的所有列表项，并为它们应用样式。我们可以在CSS中这样做：

css
li:not(:first-child) {
  color: red;
}

这个规则会将第二个和第三个列表项的文本颜色设置为红色，而第一个列表项保持默认的颜色。

使用 :not(:first-child) 选择器的好处是我们可以直接指定我们不想选中的元素（在这个例子中是第一个子元素），而不需要分别为其他元素设置样式。这种方法提高了我们的代码的可读性和维护性。

2024年6月29日 12:07 回复

您发布的版本之一实际上适用于所有现代浏览器（支持CSS 选择器级别 3）：

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

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

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

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

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

限制范围时，请使用您正在设置的每个 CSS 属性的默认值。

2024年6月29日 12:07 回复

这个 CSS2 解决方案（“一个ul接一个ul”）也有效，并且受到更多浏览器的支持。

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

:not与和不同:nth-sibling，IE7+ 支持相邻同级选择器。

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

对于任何静态网页，这应该可以完美地工作。

2024年6月29日 12:07 回复

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

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

因此，您选择ul其父元素中_除第一个元素之外的_所有元素。

有关更多示例，请参阅 Chris Coyer 的**“有用的：nth-child Recipes”**文章。nth-child

2024年6月29日 12:07 回复

您可以在“not()”伪类中使用“first-child”伪类。

shell
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>

运行代码片段Hide results

展开片段

替代方法，

使用“nth-child()”，它将选择第 n 个孩子。

div ul:not(:nth-child(1)){ background-color: #900; }
Pseudo Classes
- Home
- Products
- About
- Contact
- Services
- Downloads
- Facebook
- Instagram

运行代码片段Hide results

展开片段

使用“nth-of-type()”，它将选择其父元素的第 n 个元素。

shell
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>

运行代码片段Hide results

展开片段

使用“nth-last-child()”，它将选择从最后一个孩子开始计数的第n个孩子。如果有4个“ul”标签，可以这样写。

div ul:not(:nth-last-child(4)){ background-color: #900; }
Pseudo Classes
- Home
- Products
- About
- Contact
- Services
- Downloads
- Facebook
- Instagram

运行代码片段Hide results

展开片段

使用“nth-last-of-type()”，它将从最后一个子元素中选择其父元素的第 n 个元素。如果有4个“ul”标签，可以这样写。

div ul:not(:nth-last-of-type(4)){ background-color: #900; }
Pseudo Classes
- Home
- Products
- About
- Contact
- Services
- Downloads
- Facebook
- Instagram

运行代码片段Hide results

展开片段

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

2024年6月29日 12:07 回复

not(:first-child)似乎不再起作用了。至少在最新版本的 Chrome 和 Firefox 中是这样。

相反，试试这个：

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

2024年6月29日 12:07 回复

How can i use a notfirst child selector

6个答案

你的答案