CSS究竟是如何工作的？ [复制]答案

【问题标题】：How exactly CSS works? [duplicate]CSS究竟是如何工作的？ [复制]
【发布时间】：2019-10-12 10:35:13
【问题描述】：

目前，我正在使用 CSS。我无法理解 CSS 究竟是如何工作的。如果我想将“边框：1px 纯红色”应用于 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 适用于父元素，而不适用于子元素。 Example-2 工作正常，符合我的预期。

【问题讨论】：

标签： javascript html css css-selectors

【解决方案1】：

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

更多信息在MDN documentation。

【讨论】：

CSS 继承不同于级联。这是一个关于从父元素到其（非选定）子元素的属性继承的问题，而不是从多个规则到单个选定元素的属性级联。
@G-Cyr：不，他们真的不是。级联解析和继承是分开进行的。即使有一些特殊的值会扰乱或破坏继承链。充其量，级联值可能是“继承”，然后直接导致继承，但它们仍然是两个独立的过程。

【解决方案2】：

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

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

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

希望这会有所帮助！

【讨论】：

非常感谢您的宝贵回答。但是我怎么知道哪些属性是默认继承的，哪些不是呢？
@Biswajit 没有秘密，请阅读文档 :(
最好的了解方法是阅读文档。然而，一个好的经验法则是与文本有关的任何事情（即颜色、文本对齐、字体大小等）都将继承，而其他所有内容都不会继承。当然也有例外，所以文档是您可以找到最佳信息的地方

【解决方案3】：

不同的 CSS 属性有不同的继承和级联规则。您需要查看 CSS 规范以了解每个规范的行为方式。

在您的情况下，您问为什么 border 不被子元素继承，但 color 是：

border 的 CSS 规范声明它不被继承：https://www.w3.org/TR/css-backgrounds-3/#the-border-color
color 的 CSS 规范声明它被继承：https://www.w3.org/TR/css-color-3/#foreground

Web 开发人员和设计人员最终会熟悉每个属性并记住哪些属性是继承的，哪些不是。

但一般来说（作为经验法则）：如果规则影响元素的布局（例如框的尺寸，包括padding、width/height、margin、@987654331 @ 等）然后它不会被继承，并且只影响文本的属性（如color、font-family、font-weight 等）被继承。边缘情况位于其他属性中，例如 background-image、opacity 和 filter，您需要查阅规范以确定。

【讨论】：

【解决方案4】：

一些 CSS 属性不会继承元素父元素的计算值。您可以在子 div 元素的边框上使用 inherit 关键字，让它们继承与其父元素相同的边框

试试这个：

<html>
<head>
    <title>test</title>
    <style>
        .parent {
          border: 1px solid red;
        }

        .child{
            border: inherit;
        }
    </style>
</head>
<body>
    <div class="parent">
        Inside parent class
        <div class="child">Inside child class 1</div>
        <div class="child">Inside child class 2</div>
    </div>
</body>

【讨论】：

【解决方案5】：

在 CSS 中，继承控制在没有为元素的属性指定值时发生的情况。请参阅任何 CSS 属性定义以查看特定属性是否默认继承（“继承：是”）或不继承（“继承：否”）。

来自Inheritance - CSS: Cascading Style Sheets | MDN

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

但是，您可以使用关键字值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>

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

【讨论】：

非常感谢您的宝贵回答。但是我怎么知道哪些属性是默认继承的，哪些不是呢？
您必须参考您要使用的属性的引用，例如MDN 或w3schools，并查看它是否表示该属性是继承的。通常，影响文本的属性是继承的，而其他属性则不是，但并非总是如此，因此您最好检查参考。