CSS究竟是如何工作的？

Question

目前，我正在使用 CSS。我无法理解 CSS 究竟是如何工作的。如果我想将 "border: 1px solid red" 应用于 CSS 父元素，那么它只应用于父元素，而不应用于该父元素内的其他元素（子元素）。但是，如果我应用“颜色：红色”，则颜色属性将应用于父级内的每个子级（包括父级本身）。示例 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 适用于父元素，而不适用于子元素。示例 2 工作正常，符合我的预期。

Answer 1

一些 CSS 属性“级联”到子元素，有些则没有。border是一个不级联的例子。

MDN 文档中的更多信息。

Answer 2

这背后的原因是 CSS 属性继承。所有 HTML 元素对于所有 CSS 属性都有一组默认值。

颜色属性通常设置为“继承”，因此，子元素将继承该属性的父元素值，除非子元素明确地将该属性设置为另一个值。

另一方面，边框属性没有“继承”，因为它是默认行为，因此不会继承父值，除非您也专门设置了它。

希望这可以帮助！

Answer 3

在 CSS 中，继承控制在没有为元素的属性指定值时发生的情况。参考任何 CSS 属性定义以查看特定属性是否默认继承 ("Inherited: yes") 或不继承 ("Inherited: no")。

从继承 - CSS：级联样式表 | MDN

并非所有属性都是默认继承的，color例如是，但border不是。您必须参考文档（如MDN或w3schools）以了解属性是否设置为默认继承。

但是，您可以使用关键字 value 显式设置元素属性以继承其父属性的值inherit，如下所示：

.parent {

  border: 1px solid red;

}

.child {

  border: inherit;

}

<div class="parent">

  Some text

  <div class="child">Child element</div>

  <div class="child">Child element</div>

</div>

/!\继承不要与级联混淆，级联是定义应用于多个选择器所针对的元素的样式声明的机制。