在 CSS 中选择非第一个子元素的方法

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

在 CSS 中选择非第一个子元素的方法

作者：迹忆客最近更新：2023/03/12 浏览次数：

在本文中，我们将学习如何利用 CSS 选择器不选择第一个子元素的方法。

使用 `:not(selector)` 选择器不选择 CSS 中的第一个子元素

我们可以使用 :not(selector) 选择器来选择不是被选元素的所有其他元素。所以，我们可以使用选择器不选择 CSS 中的第一个子元素。我们可以使用 :first-child 作为 :not(selector) 选择器中的选择器。通过这种方式，我们可以将样式应用于元素的所有后代，但第一个除外。在这里，在支持 CSS Selectors level 3 的浏览器中，我们可以使用 :not 选择器。

例如，在 HTML 中创建 body 标签。然后，编写三个 p 标签并在标签之间编写一些你选择的内容。在 CSS 中，选择 body p:not(:first-child) 并将 color 设置为 red。

在这里，在下面的代码段中，我们可以看到正文包含段落，并且除了第一个之外，所有段落的字体颜色都设置为红色。因此，我们可以选择除第一个子元素之外的所有子元素并应用样式。然而，:not 选择器有一定的局限性（例如它只能将 simple selectors 作为参数处理）。

代码示例：

<body>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</body>

body p:not(:first-child) {
    color: red;
}

在 CSS 中使用 `:first-child` 选择器单独设置第一个子元素的样式，不要选择第一个子元素

我们可以设置特定规则来覆盖之前使用 :first-child 选择器设置的规则。通过这种技术，我们可以为除第一个子元素之外的所有子元素设置样式。使用 :first-child 选择器覆盖样式将使第一个子元素看起来与其他子元素不同。

例如，使用与第一种方法相同的 HTML 结构。在 CSS 中，选择 p 标签并将 color 设置为蓝色。接下来，选择第一个子元素作为 body p:first-child，然后将 color 设置为 black。

在这里，除了第一个段落之外的段落的默认样式设置为 color: blue，而它使用 :first-child 选择器被 color: black 覆盖。因此，我们可以使用 :first-child 选择器来不选择第一个子元素。

代码示例：

p{
    color:blue;
}
    body p:first-child {
    color: black;
}

<body>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</body>

上一篇：在 CSS 中将 div 水平居中

下一篇：在 CSS 中仅在底部设置框阴影

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享