html - 直系儿童 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 颜色，然后使用直接儿童颜色：

.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时，这意味着选择父元素为 div 元素的所有 p 元素

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

<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 属性默认是继承的。
不可能按照你想要的方式去做。

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

现在，对于你的问题......“解决”这个问题的简单、容易和正确的方法......是在他之前的回答中已经告诉你的@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>