Question

当前，我和CSS在一起。我不明白CSS是如何工作的。如果我想将“ border：1px纯红色”应用于CSS父元素，则仅应用于父元素，而不应用于该父元素内的其他元素（子元素）。但是，如果我应用“ color：red”，那么color属性将应用于父级内部的每个子级（包括父级本身）。

示例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可以按我的预期工作。

Answer 1

某些CSS属性会“级联”到子元素，有些则不会。 border是一个不会逐步下降的示例。

MDN documentation中的更多信息。

Answer 2

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

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

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

希望这会有所帮助！

Answer 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，position等），那么它将不会被继承，并且仅影响文本的属性（例如color，font-family，font-weight等）被继承。边缘情况位于background-image，opacity和filter之类的其他属性中，您需要查阅该规范才能确定。

Answer 4

在CSS中，继承控制了当没有为元素上的属性指定值时发生的事情。请参考任何CSS属性定义，以查看默认情况下特定属性是否继承（“ Inherited：yes”）（“ Inherited：no”）。

来自Inheritance - CSS: Cascading Style Sheets | MDN

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

不过，您可以使用关键字值inherit显式设置element属性以继承其父属性的值，如下所示：

.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>

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

Answer 5

某些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>

CSS到底如何工作？

5 个答案: