直接的孩子css，只有那些 [英] Immediate children css, and only those

问题描述

我试图达到的目标听起来非常简单，但并非如此。我甚至不知道我是否可以完成我想要做的事情。

好的，我们得到了我们的元素与类名.parent，.parent得到了两个div的孩子，一个是立即的，另一个是放入第一个的，如下所示：

 < div class =parent> ; 
< div>第一个孩子
< div>第二个孩子< / div> 
< / div> 
< / div> 
  

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

  .parent> div {
 color：green; 
} 
  

但它不是，因为第二个孩子也会受到影响。 / p>

这是否可以实现？

旁注：
某些CSS属性（如color）是从父母，尽管这个元素没有直接的风格。我想这是造成问题的原因。但是，我仍然不希望它级联。

解决方案

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

.parent div {color：＃000; } .parent> div {color：green;}

< div class = 亲本 > < div>第一个孩子< div>第二个孩子< / div> < / div>< / div>

What I'm trying to achieve sounds really simple, but is not. I don't even know if I can accomplish what I'm trying todo.

Ok so we got our element with the classname .parent, .parent got two div children, one is immediate and the other one is put into the first one like so:

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

Targeting the first child should be as simple as:

.parent > div {
  color: green;
}

but it isn't, as "Second child" also get affected.

Is this achieveable?

Sidenote: Some CSS-properties like "color" is inheriting from parents, even though the element does not got the direct style. I guess this is what causing the issue. But still, I don't want it to cascade.

解决方案

Parent element color is inherited to children element. First set div color and then use direct children's color:

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

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

这篇关于直接的孩子css，只有那些的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！