有人可以解释多个内联 nth-child() 是如何工作的吗？

Question

例如我可能有这个：

html>body>#wrapper>div>div>div:nth-child(1)>div:nth-child(1)>nav {

这到底有什么作用？有人可以分解每个 div、“>”和第 nth-child() 吗？谢谢你。试图弄清楚这是如何工作的。

Answer 1

>就是child selector。注意后代和 child 之间的区别。 css 选择器 .a .b 匹配 class 为 b 的任何元素，该元素是 class 为 a，而 css 选择器 .a>.b 匹配具有 b 的 class 的任何元素，这是 child 的 class 为 a 的元素。所有children也是后代，但只有first-generation个后代是children.

所以：

#wrapper 匹配 ID 为 wrapper
#wrapper>div 匹配 div 个元素，它们是 #wrapper
#wrapper>div>div 匹配 div 个元素，这些元素是 children 个 div 个元素，这些元素是 children 个 #wrapper
#wrapper>div>div>div:nth-child(1) 匹配 div 个元素，这些元素是 个 child 个元素，div 个元素是 child ren 个 div 个元素是 children 个 #wrapper
#wrapper>div>div>div:nth-child(1)>div:nth-child(1) 匹配 div 个元素，它们是 的第一个 child 个元素，div 个元素是 第一个 child 个 div 个元素是 children 个 div 个元素是 children 个 #wrapper
#wrapper>div>div>div:nth-child(1)>div:nth-child(1)>nav 匹配导航元素 children of div elements which are the first child of div 个元素是 个 child 个 div 个元素 child 个 div 个 child 元素=]任#wrapper

这太疯狂了CSS。最好给 nav 元素一个 id 或 class 然后在 CSS:

中使用更简单的选择器

<nav id="nav1" class="top-nav">
<style>
  #nav1 { ... rules here ... }
  .top-nav { ... rules here ...}
</style>

有人可以解释多个内联 nth-child() 是如何工作的吗？

Can someone explain how multiple inline nth-child() works?

html

css