CSS到底如何工作? [英] How exactly CSS works?

问题描述

当前，我和CSS在一起.我不明白CSS到底是如何工作的. 如果我想将"border:1px纯红色"应用于CSS父元素，那么它将仅应用于父元素，而不应用于该父元素内的其他元素(子元素).但是，如果我应用颜色:红色"，那么color属性将应用于父级内部的每个子级(包括父级本身).

Currently, I am stack with CSS. I can't understand how exactly CSS works. If I want to apply "border: 1px solid red" to a CSS parent element then it is only applied to parent element but not other elements (children) that inside this parent. But If I apply "color: red" then the color property is applied to every single child inside the parent (Including parent itself).

示例1:

<div class="parent">
    Inside parent class
    <div class="child">Inside child class 1</div>
    <div class="child">Inside child class 2</div>
</div>

.parent {
  border: 1px solid red;
}

示例2:

<div class="parent">
    Inside parent class
    <div class="child">Inside child class 1</div>
    <div class="child">Inside child class 2</div>
</div>

.parent {
  color: red;
}

为什么example-1适用于父元素，而不适用于子元素. Example-2可以按我预期的那样很好地工作.

why example-1 works for the parent element, not for children. Example-2 works fine what I expected.

推荐答案

某些CSS属性会级联"到子元素，有些则不会. border是一个不会向下层叠的示例.

Some CSS properties "cascade" down to children elements, some don't. border is an example that does not cascade down.

MDN文档中的更多信息.

这篇关于CSS到底如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！