css nth-child
使用CSS选择器将样式应用于网页。 选择器,使您可以定位特定元素或元素集。 通常,从CSS开始时,您将先使用元素选择器,然后再转向使用类和ID。
尽管这些选择器功能强大,但它们可能具有很大的局限性,因此无法根据其状态选择元素。 如果您曾经使用过React和Vue等前端框架,那么您可能会了解状态的含义。 我指的不是应用程序的整体状态,而是HTML代码中元素的状态。
谦虚链接是一个简单的示例–可以使用锚标记<a>
创建。 链接然后可以具有不同的状态:
- 在点击链接之前
- 当用户将鼠标指针悬停在链接上时
- 访问链接时
用于根据元素的状态作为目标的选择器称为伪类 。 nth-child
和nth-of-type
是伪类,它们根据元素的位置选择元素(元素的位置也被视为状态)。 让我们仔细看看。
如何使用:nth-child()
第nth-child
伪类用于根据元素在同级列表中的位置选择元素。 这里要注意一些事情:
- 兄弟姐妹 :存在父元素和子元素的地方。 在选择同级时,您要针对所选父级的特定子级。
ul
和li
一束是父元素和子元素的示例。 - 元素在其同级列表中的位置由传递给伪类的值确定。
我们将利用下面HTML代码来学习nth-child
工作方式。
<ul>
<li>Ruby</li>
<li>Python</li>
<li>JavaScript</li>
<li>Go</li>
<li>PHP</li>
<li>Scala</li>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C</li>
</ul>
有两种不同的方法来指定元素的位置:关键字和功能符号的使用。
:nth-child(偶/奇)
如果使用关键字,则可以指定位置为even
或odd
元素,如下所示:
ul :nth-child(even) {
color: red;
}
ul :nth-child(odd) {
color: gray;
}
这给我们以下内容:
:nth-child(2)
当我们指定一个特定的数字(例如本例中的2)时,我们在同级兄弟列表中选择其位置与我们传递的数字相匹配的元素。 在这里,我们针对无序列表的第二个子对象。
ul {
color: gray;
}
ul :nth-child(2) {
color: red;
}
您可能可以想象结果是什么样的:
一个常见的陷阱是在指定了元素之后,您可能向父级添加了新元素(例如标题),而没有意识到所选元素会发生变化。 为了显示这一点,让我们将标题添加到列表中,如下所示:
<ul>
<h3>Programming Languages</h3>
<li>Ruby</li>
<li>Python</li>
<li>JavaScript</li>
<li>Go</li>
<li>PHP</li>
<li>Scala</li>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C</li>
</ul>
即使这实际上是对HTML的无效使用,浏览器仍然可以正常使用它,在这种情况下,将选择第一个li
元素,因为它现在是无序列表的第二个子元素。
:nth-child(一个)
好的,现在我们要解决这个问题。 在这里,我们选择的元素 (复数)将使用功能符号来确定。 n
代表一个计数器, A
代表周期的大小,给我们一个序列。 例如,当我们传递2时,它将按顺序2、4、6等选择元素:
ul :nth-child(2n) {
color: red;
}
为了看到它的实际效果,让我们回到我们HTML代码并将一些项目添加到列表中。 我们还将使列表成为有序列表,以便我们可以清楚地看到商品编号:
<ol>
<li>Ruby</li>
<li>Python</li>
<li>JavaScript</li>
<li>Go</li>
<li>PHP</li>
<li>Scala</li>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C</li>
<li>Cobol</li>
<li>Fortran</li>
</ol>
我们的结果如下:
:nth-child(An + B)
在这里,我们为循环添加了额外的计算: +B
在兄弟姐妹列表中位置与模式匹配的元素将被选中。 我们需要知道计算是如何发生的,所以让我们尝试这样的功能符号:
ol {
color: gray;
}
ol :nth-child(3n+1) {
color: red;
}
这将选择位置匹配1、4、7、10等的项目:
计算从默认值n
0
开始计数,因此要样式化的元素将按以下方式计算:
- 第一个元素:3(0)+1 =
1
。 - 第二个元素:3(1)+1 =
4
。 - 第三元素:3(2)+1 =
7
。 - 第四元素:3(3)+1 =
10
。
可以将其视为代数方程式,其中n
的值以算术方式增加,并且要设置样式的元素是该方程式的结果。 这是另一个示例,您可以对其进行编辑以查看会发生什么:
ol :nth-child(3n+2) {
color: red;
}
您还可以使用以下方法,使用以下公式选择偶数:
ol :nth-child(2n+0) {
color: red;
}
奇数可以使用以下方法选择:
ol :nth-child(2n+1) {
color: red;
}
如何使用:nth-of-type()
在我们看到的nth-child
级伪类的所有示例中,必须注意,目标是在同级列表中选择元素。 这没有考虑元素类型 。 为了确保选择也适用于特定类型,我们可以使用nth-of-type
伪类。
为了在工作中看到这一点,让我们将HTML代码编辑为如下所示(再次,从技术上讲,这是对HTML的滥用,但是浏览器会很好地解释它):
<ol>
<p>This is a first paragraph<p>
<li>Ruby</li>
<li>Python</li>
<li>JavaScript</li>
<li>Go</li>
<li>PHP</li>
<p>Here is a paragraph</p>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C</li>
<li>Cobol</li>
<li>Fortran</li>
</ol>
要选择位置为奇数的li
元素,我们可以这样做,
ol li:nth-of-type(odd) {
color: red;
}
这给了我们:
要选择位置为偶数的li
元素,我们可以
ol li:nth-of-type(even) {
color: red;
}
您可能会认为,使用nth-child只要指定li
就可以有效地工作,例如:
ol li:nth-child(odd) {
color: red;
}
但事实并非如此。 自己尝试!
结论
当您必须在同级列表中选择特定元素时,这些伪类会派上用场。 要了解有关它们的更多信息,请检查MDN Web文档中的nth-child()
和nth-of-type()
。
css nth-child