直系儿童 css，只有那些

Question

我想要实现的目标听起来很简单，但事实并非如此。我什至不知道我是否能完成我想做的事情。

好的，所以我们得到了类名为 .parent 的元素，.parent 有两个 div 孩子，一个是直接的，另一个像这样放入第一个：

<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>

定位第一个孩子应该很简单：

.parent > div {
  color: green;
}

但事实并非如此，因为“第二个孩子”也会受到影响。

这可以实现吗？

旁注： 一些 CSS 属性（如“颜色”）是从父级继承的，即使元素没有直接样式。我想这就是导致问题的原因。但是，我仍然不希望它级联。

Answer 1

父元素颜色继承给子元素。先设置div颜色，然后直接使用children的颜色：

.parent div{
  color: #000;
  }
.parent > div {
  color: green;
}

<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>

Answer 2

css 是级联的，因此您对元素所做的更改会影响子元素。但是，您可以为第二个孩子添加一个 css 类来覆盖 css。

Answer 3

当你使用div > p时，它意味着选择所有p元素，其中父元素是div元素

但是，如果您为一个元素设置了一个属性，那么如果您不覆盖它，所有子元素都将继承该属性。例如：

<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>

在您的情况下，所有 div 都将通过继承具有 color:green 属性。如果要更改第二个 div 的属性，您必须执行以下操作：div.parent div div { color: red }。这意味着选择所有 div 哪个父级是一个 div 哪个父级是一个具有“父级”类的 div。

这就是样式表的工作原理。

Answer 4

不，你不能。

CSS color property 默认为Inherited。
按照你想要的方式是不可能的。

但更重要的是：这不是ISSUE，它应该是这样的。
记住：CSS => Cascade Style Sheet。

现在，对于你的问题......“解决”这个问题的简单、容易和正确的方法......是已经在他的previous answer 中告诉你的那个@Bhojendra Nepal。

编辑：

另一种选择是将飞行文本包装在 span tag.. 或类似名称中：

.parent > div > span {
  color: green;
}

<div class="parent">
  <div>
    <span>First child</span>
    <div>
      <span>Second child</span>
    </div>
  </div>
</div>