Here's a Header
I'm a paragraph with all kinds of information.
Let's add another paragraph for fun.
yadda yadda yadda
blah blah blah
yadda yadda yadda
Here's a Subheader
blah blah blah
And maybe just one more.
本文共 8001 字,大约阅读时间需要 26 分钟。
css nth-child
CSS has a number of pseudo-classes to help you style your app with ease. Having lots of options can be great, but it can also be confusing to know which pseudo-class to use and what it really does. Here we’ll look at CSS’s nth-child and nth-of-type pseudo-classes to get a better understanding of when to use each and what the actual difference is.
CSS有许多伪类,可帮助您轻松设置应用样式。 有很多选项可能很棒,但是知道要使用哪个伪类以及它的实际作用也可能会造成混淆。 在这里,我们将查看CSS的nth-child和nth-of-type伪类,以更好地理解何时使用每种伪类以及它们之间的实际区别。
The nth-child
and nth-of-type
CSS pseudo-classes are interesting compared to other types of pseudo-classes because they select elements based on their position in the DOM. Whereas some pseudo-classes select a specific state of an element (e.g. the , pseudo-classes), nth-child
and nth-of-type
are more concerned with the structure of your markup.
与其他类型的伪类相比, nth-child
和nth-of-type
CSS伪类很有趣,因为它们基于元素在DOM中的位置来选择元素。 尽管某些伪类选择元素的特定状态(例如, , 伪类),但是nth-child
nth-of-type
和nth-of-type
更关心标记的结构。
To understand the difference between nth-child
and nth-of-type
, let’s first build our HTML to know what we’re going to be styling.
要了解nth-child
和nth-of-type
之间的区别,让我们首先构建HTML来了解样式。
Let’s say we have a section on our webpage that has a mix of header (<h1>
, <h3>
) and paragraph (<p>
) elements.
假设我们的网页上有一部分包含标头( <h1>
, <h3>
)和段落( <p>
)元素。
Here's a Header
I'm a paragraph with all kinds of information.
Let's add another paragraph for fun.
yadda yadda yadda
blah blah blah
yadda yadda yadda
Here's a Subheader
blah blah blah
And maybe just one more.
This markup will look something like this:
这个标记看起来像这样:
In total, we have an <article>
element as the parent, and nine child elements: one <h1>
, one <h3>
, and seven <p>
tags.
总的来说,我们有一个<article>
元素作为父元素,还有9个子元素:一个<h1>
,一个<h3>
和七个<p>
标记。
There are a few options for what values you can pass the nth-child
and nth-of-type
pseudo-classes. Note: nth-child
is used here but it can be replaced with nth-of-type
too.
对于可以传递第nth-child
和nth-of-type
伪类的值,有一些选择。 注意:此处使用了nth-child
,但也可以将其替换为nth-of-type
。
:nth-child(2n+3): This option requires some math. The numbers are up to you; it’s the n
that will vary. This will take your selected elements, set n
to 0 to start, and increment from there. So, similarly to a for
loop in JavaScript, it will iterate through your selected elements by updating the n
value: 2(0)+3 = 3
, 2(1)+3 = 5
, 2(2)+3 = 7
, and so on. The result of this will be selecting the third, fifth, seventh, etc. elements.
:nth-child(2n + 3) :此选项需要一些数学运算。 数字由您决定; 是n
会有所不同。 这将采用您选择的元素,将n
设置为0开始,并从此处开始递增。 因此,类似于JavaScript中的for
循环,它将通过更新n
值来遍历您选择的元素: 2(0)+3 = 3
2(1)+3 = 5
2(2)+3 = 7
,等等。 这样的结果将是选择第三,第五,第七等元素。
:nth-child(odd/even): The strings odd
or even
can be passed to select the odd and even elements available.
:nth-child(odd / even) :可以传递odd
或even
字符串以选择可用的奇数和偶数元素。
:nth-child(3n): You can also pass a number with the n
variable, which will select that interval of the selected element’s occurrence. If 3
is passed, it will select the third, sixth, ninth, etc. elements.
:nth-child(3n) :您还可以传递带有n
变量的数字,该数字将选择所选元素出现的时间间隔。 如果3
通过,它将选择的第三,第六,第九,等元素。
:nth-child(3): If you just pass a number (without the n
), it will select that element from the DOM specifically. Passing 3
will select the third matching element only.
:nth-child(3) :如果只传递一个数字(不带n
),它将从DOM中专门选择该元素。 传递3
只会选择第三个匹配元素。
The nth-child
pseudo-class has two important components to consider:
第nth-child
伪类具有两个要考虑的重要组成部分:
If we go to our CSS stylesheet for the HTML example above, we can select our paragraph elements and make the font color maroon
like so:
如果转到上述HTML示例CSS样式表,则可以选择我们的段落元素,并使字体颜色maroon
如下:
article p { color: maroon;}
Let’s say we want every other paragraph element to be a yellow-ish color, though. (An “interesting” style choice… 🙈) We can apply the nth-child
pseudo-class to only apply the new color to every other child element that’s a paragraph.
假设我们希望所有其他段落元素为淡黄色。 (一种“有趣的”样式选择…🙈)我们可以将nth-child
伪类应用于仅将新颜色应用于属于段落的其他所有子元素。
article p:nth-child(odd) { color: goldenrod;}
Now our paragraphs alternate colors, but did you notice what happened after the sub-header? The maroon color was repeated and then switched back to yellow. Let’s look at why that happened.
现在我们的段落是交替显示的颜色,但是您是否注意到副标题之后发生了什么? 重复褐红色,然后切换回黄色。 让我们看看为什么会这样。
In our example above, the paragraphs that match our p:nth-child(odd)
styling have to meet the following requirements in this order:
在上面的示例中,与我们的p:nth-child(odd)
样式匹配的段落必须按以下顺序满足以下要求:
Determining whether the child is odd or even is not type-specific. That means the odd/even check looks at all the children in the parent element of what is being selected (the paragraph elements) and then looks for all the paragraphs that are considered odd elements.
确定孩子是奇数还是偶数不是特定于类型的。 这意味着奇数/偶数检查将查看所选内容的父元素(段落元素)中的所有子元素,然后查找被视为奇数元素的所有段落。
The paragraphs that have the yellow font styling applied are “odd” children elements and they are paragraph (<p>
) elements. 👩🎤 That explains why the paragraph after the sub-header ends up being the default maroon color– it’s actually an “even” child!
应用了黄色字体样式的段落是“奇数”子元素,它们是段落( <p>
)元素。 🎤这解释了为什么副标题后面的段落最终成为默认的栗色-它实际上是一个“偶”子!
The nth-of-type
is very similar to the nth-child
pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic.
第nth-of-type
与nth-child
伪类非常相似。 主要区别在于,它在检查任何其他逻辑之前会专门考虑要选择的元素的类型。
Let’s use our example from above but apply nth-of-type
instead.
让我们从上面使用示例,但是应用nth-of-type
。
Here's a Header
I'm a paragraph with all kinds of information.
Let's add another paragraph for fun.
yadda yadda yadda
blah blah blah
yadda yadda yadda
Here's a Subheader
blah blah blah
And maybe just one more.
article p { color: maroon;}article p:nth-of-type(odd) { color: goldenrod;}
The default color is still maroon but now we’re selecting the odd paragraph elements only.
默认颜色仍然是栗色,但现在我们仅选择奇数段落元素。
The styles are now applied if the element meets the following requirement:
现在,如果元素满足以下要求,则应用样式:
If we look at this again with the annotations, it’s a little clearer how these are getting selected.
如果我们再次使用注解进行查看,那么如何选择这些注解会更加清楚。
The headers (<h1>
, <h3>
) are not considered at all with nth-of-type
because we’re selecting by the element type specifically. We only care about the <p>
elements in this case. 🔥
标头( <h1>
, <h3>
)根本不考虑nth-of-type
为nth-of-type
因为我们是根据元素类型专门选择的。 在这种情况下,我们只关心<p>
元素。 🔥
Whether you use nth-child
or nth-of-type
will ultimately depend on what your goal is for styling. (Classic “it depends” answer, right? 🤓)
究竟使用nth-child
还是nth-of-type
最终取决于样式的目标。 (经典的“取决于”答案,对吧?)
As a general rule, if you want to select an interval of a selector regardless of the type of element it is, use nth-child
. However, if you want to select a specific type only and apply an interval selection from there, use nth-of-type
. 🥳
通常,如果要选择选择器的间隔而不管元素的类型如何,请使用nth-child
。 但是,如果只想选择一种特定类型并从中应用间隔选择,请使用nth-of-type
。 🥳
The nth-child
and nth-of-type
selectors both have excellent browser support. Check and on CanIUse.com for more details. You shouldn’t have any issues with either unless you’re supporting IE8 or lower. 🙈
第nth-child
nth-of-type
选择器和nth-of-type
选择器都具有出色的浏览器支持。 有关详细信息,请检查CanIUse.com上的和 。 除非您支持IE8或更低版本,否则您都不会有任何问题。 🙈
翻译自:
css nth-child
转载地址:http://tphgb.baihongyu.com/