:nth-​​child(n)前面的空格有什么作用? [英] What does a space preceding :nth-child(n) do?

查看:72
本文介绍了:nth-​​child(n)前面的空格有什么作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我编写一些CSS时,出现了在使用:nth-child(n)之前从未遇到过的情况,并且我怀疑实际发生的情况.

While I was writing a bit of CSS, a situation that I have never encountered before using the :nth-child(n) appeared and I was doubt of what is actually happening.

当我使用伪类时,我会在选择器之间没有空格的情况下编写它们,就像这样:

When I use pseudo classes, I write them without a space between the selector, like so:

div#wrap:hover {
    border-bottom: 2px solid orange;
}
/* OR */
div#wrap:nth-child(4) {
    border-bottom: 2px solid orange;
}

但是它没有按我预期的方式工作,所以我尝试在选择器和伪类之间插入一个空格.令人惊讶的是,它有效:

But it didn't work the way I expected, so I tried inserting a space between the selector and the pseudo class. Surprisingly, it worked:

div#wrap :nth-child(4) {
    border-bottom: 2px solid orange;
}

这是怎么回事?

div#wrap :nth-child(4) {
  border-bottom: 2px solid orange;
}

<div id="wrap">
  <h1>Heading 1</h1>
  <p>This is a test!</p>
  <h2>Creating content</h2>
  <p>The next paragraph uses the <strong>.html</strong> method to create a new element.</p>
</div>

推荐答案

您误解了选择器.它选择也是:nth-child(n)的元素,其中也具有先前的元素作为父元素.

You're misunderstanding the selector. It selects the element that is also the :nth-child(n) which also has the preceding element as a parent.

如果前面没有选择器,则默认为*:nth-child(n)

When there is no selector preceding, it defaults to *:nth-child(n)

因为您可能只想将其应用于直接后代,而不是将每个元素应用到其父代的第四个子代和父代的后代,所以我将使用.element > *:nth-child(n)仅应用于直接后代.

Because you probably only want to apply this to direct descendants and not every element which is the fourth child of its parent and a descendant of the parent, I would use .element > *:nth-child(n) to only apply to direct descendants.

div#wrap > *:nth-child(4) {
  border-bottom: 2px solid orange;
}

div#wrap > *:nth-child(4) {
  border-bottom: 2px solid orange;
}

<div id="wrap">
  <h1>Heading 1</h1>
  <p>This is a test!</p>
  <h2>Creating content</h2>
  <p>The next paragraph uses the <strong>.html</strong> method to create a new element.</p>
</div>

如果您想更加具体,并且仅选择第四个子元素(如果它是<p>元素),则可以使用.element > p:nth-child(n).这将选择所有<p>元素,它们是与div#wrap选择器匹配的元素的第四个直接后代.

If you wanted to be more specific and only select the fourth child if it is a <p> element, you can use .element > p:nth-child(n). This will select all <p> elements that are the fourth direct descendant of elements matching the div#wrap selector.

div#wrap > p:nth-child(4) {
  border-bottom: 2px solid orange;
}

div#wrap > p:nth-child(4) {
  border-bottom: 2px solid orange;
}

<div id="wrap">
  <h1>Heading 1</h1>
  <p>This is a test!</p>
  <h2>Creating content</h2>
  <p>The next paragraph uses the <strong>.html</strong> method to create a new element.</p>
</div>

如果要选择直接从每个div#wrap降序的第二个<p>元素,则可以这样使用.element > p:nth-of-type(n):

If you want to select the second <p> element directly descending from each div#wrap, you can use .element > p:nth-of-type(n) like so:

div#wrap > p:nth-of-type(2) {
  border-bottom: 2px solid orange;
}

div#wrap > p:nth-of-type(2) {
  border-bottom: 2px solid orange;
}

<div id="wrap">
  <h1>Heading 1</h1>
  <p>This is a test!</p>
  <h2>Creating content</h2>
  <p>The next paragraph uses the <strong>.html</strong> method to create a new element.</p>
</div>

这篇关于:nth-​​child(n)前面的空格有什么作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆