Question

有人可以解释这背后的理论吗？我有这个代码; https://jsfiddle.net/vikaskulkarni/cnLdwxza/1/

var test = React.createClass({
    render: function(){
    }
})

这很好用。但是，如果我从此链接中删除DIV，则第一个子选择器不起作用， https://jsfiddle.net/vikaskulkarni/95gbpmf8/1/

var test = React.createClass({
    render: function(){
}
})

我在网上搜索，看到使用选择器时总是涉及DIV。所以我对这些选择器的工作方式感到有点困惑。

Answer 1

如果你检查你的DOM，结果是浏览器在<body>标签内添加了另外3个元素。 :first-child运算符仅在被定位的元素是<article>并且是其父元素的第一个子元素时才起作用。情况并非如此，因为<first-child>实际上是<meta>标记。这就是删除div时逻辑失败的原因。

要使其在没有<div>的情况下正常运行，您可以将CSS样式更新为以下内容：

  article:nth-child(4) {
    background-color: red;
  }

  article:nth-child(5) {
    background-color: yellow;
  }

  article:nth-child(6) {
    background-color: blue;
  }

  article:nth-child(7) {
    background-color: green;
  }

我个人建议使用包装<div>，因为它可以保持HTML和相应的CSS组织。此外，浏览器添加的额外标签的顺序可能因浏览器而异，因此无法保证上述设置适用于所有浏览器。使用<div>可以保证，因为您的<article>标记始终是包装div的唯一子项。

Answer 2

文章是父div的子元素。 :first-child选择器要求元素是其父元素中的第一个子元素。在这种情况下，它不是。如果删除父项，则子项不再是该div的子项，它们是正文的子项，并且:first-child选择器不能使用。请注意，:last-child

的工作方式相同

Answer 3

<body></body>内的每个节点都是正文的子节点，所以在你的css中你不必为子类选择器加上一个正文类的前缀

看我的演示来理解这个想法

https://jsfiddle.net/95gbpmf8/3/

article {
    width: 50%;
    float: left;
  }
  article:first-child {
    background-color: red;
  }

  article:nth-child(2) {
    background-color: yellow;
  }

  article:nth-child(3) {
    background-color: blue;
  }

  article:last-child {
    background-color: green;
  }

浮动节点使其显示为“内联块”，因此您的文章节点现在是带有内联块显示的div。

：第一个孩子不工作，除非父母是<div>

3 个答案: