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 {&nbsp; border: 1px solid red;}.child {&nbsp; border: inherit;}<div class="parent">&nbsp; Some text&nbsp; <div class="child">Child element</div>&nbsp; <div class="child">Child element</div></div>/!\继承不要与级联混淆，级联是定义应用于多个选择器所针对的元素的样式声明的机制。