Question

我想要实现的听起来非常简单，但事实并非如此。我甚至不知道我是否能完成我正在尝试的东西。

好的，所以我们得到了带有类名.parent的元素.parent有两个div子，一个是立即的，另一个是第一个放入第一个：

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

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

.parent > div {
  color: green;
}

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

这可以实现吗？

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

Answer 1

父元素颜色继承到children元素。首先设置div颜色，然后使用直接儿童的颜色：

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

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

Answer 2

不，你不能。

默认情况下，

CSS color property为Inherited 无法按照您想要的方式进行操作。

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

现在，对于你的问题......简单，容易和正确的方式解决＆＃34;这个......已经在@Bhojendra Nepal中告诉你previous answer。

编辑：

另一种选择是将该飞行文本包装在span tag ..或类似的内容中

＆＃13;
＆＃13;
.parent > div > span { color: green; }
＆＃13;
<div class="parent"> <div> <span>First child</span> <div> <span>Second child</span> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

css是级联的，因此您对元素所做的更改会影响子元素。但是，您可以将css类放到第二个子节点来覆盖css。

Answer 4

使用 div＆gt;时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，类是＃34; parent＆＃34;。

这就是样式表的工作方式。

直接的孩子css，只有那些

4 个答案:

不，你不能。

编辑：