当前,我和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可以按我的预期工作。
答案 0 :(得分:6)
某些CSS属性会“级联”到子元素,有些则不会。 border
是一个不会逐步下降的示例。
MDN documentation中的更多信息。
答案 1 :(得分:3)
其背后的原因是CSS属性继承。所有HTML元素的所有CSS属性都有一组默认值。
color属性通常设置为“继承”,因此,子元素将继承此属性的父元素值,除非子元素明确将属性设置为另一个值。
另一方面,border属性没有“继承”,因为它是默认行为,因此除非您也进行了专门设置,否则它不会继承父值。
希望这会有所帮助!
答案 2 :(得分:0)
不同的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
之类的其他属性中,您需要查阅该规范才能确定。
答案 3 :(得分:0)
在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>
/!\ 不要将继承与级联混淆,级联是定义应用于多个选择器所针对的元素的样式声明的机制。
答案 4 :(得分:0)
某些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>