即时孩子的CSS,只有那些(Immediate children css, and only tho

2019-10-21 18:12发布

我正在努力实现听起来很简单,但并非如此。 我甚至不知道如果我能做到我想要的待办事项。

好了,所以我们得到了我们与类名.parent元素,.parent有两个孩子的div,一个是立竿见影的,另一种是放到第一位,像这样:

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

针对第一个孩子应该是简单:

.parent > div {
  color: green;
}

但它不是,因为“老二”也会受到影响。

这是achieveable?

旁注:一些CSS-属性,如“颜色”是从父母继承,即使元素没有得到直接的风格。 我猜这是什么导致了问题。 但是,我不希望它级联。

Answer 1:

父元素的颜色是继承了儿童元素。 第一组格颜色,然后直接用孩子的色彩:

 .parent div{ color: #000; } .parent > div { color: green; } 
 <div class="parent"> <div>First child <div>Second child</div> </div> </div> 



Answer 2:

不,你不能。

CSS color属性是继承的默认。
这是不可能做到这一点在你想要的方式

但更重要的是: 它不是一个ISSUE ,它是应该的方式。
记住: CSS => Cascade Style Sheet

现在,你的问题...简单,方便,正确的方式“解决”这是......已经告诉你一个@Bhojendra尼泊尔在他前面的回答 。

编辑:

另一种办法是包装在一个飞行文本span tag ..或类似:

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



Answer 3:

CSS中级联,所以你做一个元素的变化影响的孩子们。 你可以,但是把CSS类老二覆盖CSS。



Answer 4:

当使用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。

这是样式表是如何工作的。



文章来源: Immediate children css, and only those