直接的孩子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屋!