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

Ashok Chapagai 2023年2月20日 2021年12月20日
  1. 使用 :not(selector) 选择器不选择 CSS 中的第一个子元素
  2. 在 CSS 中使用 :first-child 选择器单独设置第一个子元素的样式,不要选择第一个子元素
在 CSS 中选择非第一个子元素的方法

在本文中,我们将学习如何利用 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> 
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub