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