首页 > 其他分享 >总结 CSS 伪类选择器 nth-child

总结 CSS 伪类选择器 nth-child

时间:2023-01-26 14:00:10浏览次数:58  
标签:伪类 color 元素 nth child 选择器 red

前言

nth-child 伪类选择器非常地好用,所以必须得掌握它,能够为我们简化不少的 CSS 代码。比如选择前 n 行元素、选择后 n 行元素、选择奇偶行元素、选择 n 倍元素等。其语法本文不说,请看 MDN:nth-child - CSS

在使用时一直记住,n 代表 0,1,2,3,... 的序列。现在有 10 个 p 标签:

<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>

选择奇数行元素

选择 1、3、5 的元素,即奇数行的元素:

p:nth-child(2n + 1) {
  color: red;
}

或者可以直接通过单词 odd 代表奇数:

p:nth-child(odd) {
  color: red;
}

image

选择偶数行元素

选择 2、4、6 的元素,即偶数行的元素:

p:nth-child(2n) {
  color: red;
}

或者可以直接通过单词 even 代表偶数:

p:nth-child(even) {
  color: red;
}

image

修改起始值和间距

选择 3、6、9,也就是说,起始的元素不是从 0 开始,而是从 3 开始。所以是 3n + 3 或者 3n,序列元素之间的差是 3:

p:nth-child(3n + 3) {
  color: red;
}

image

接下来,修改除 3、6、9 以外的 p 元素的 color。直接结合 :not 选择器,CSS 是可以选择器套选择器的:

p:not(:nth-child(3n)) {
  color: red;
}

image

标签:伪类,color,元素,nth,child,选择器,red
From: https://www.cnblogs.com/Enziandom/p/17067529.html

相关文章