我有一个我正在建立的网站,它有深层嵌套的div,并使用用户可选择的主题.我的问题是......为什么边框颜色不会传播到子元素？
我已经在处理DOM样式表了,所以添加一个循环来更新边框颜色并不困难.然而我很好奇为什么它是标准的(Firefox和Chrome,在Linux中)边框颜色不从父级继承,而是默认为文本颜色,仍然边框样式不会默认为实体？
这种行为背后有一些智慧吗？我不是想做个傻瓜.我真的好奇为什么这似乎是"按设计".
正如我写的那样,我意识到最简单,最灵活的解决方案是将我的元素定义为class ="classname border",然后更新border类以反映正确的边框颜色.
尽管如此,我不明白为什么？
这里有一个简单的html来演示这个问题......
<html>
<head>
<style type="text/css">
.content{
color: red;
display: inline-block;
border-width: 2px;
border-style: solid;
border-color: yellow;
}
.nested{
color: green;
display: inline-block;
border-width: 2px;
border-style: solid;
margin: 3px;
}
</style>
</head>
<body>
<div class="content">
Content div. Red text, yellow border.<br>
<div class="nested">
Ignores parent border color. Defaults to text color.
</div>
</div>
</body>
</html>
我不会问这个问题,除非我很确定这里有人真正评论了rfc,并且有一些背景信息可能会对'为什么'有所了解.
谢谢.
跳跃
And*_*und 12
边框颜色没有默认值.您需要手动告诉它从其父级获取其值border-color: inherit;
这是一个老问题,我很震惊没有人提出这个解决方案.如果您执行以下步骤,则可以使用CSS轻松实现继承的边框颜色:
1)在您的css文件中创建以下规则:
*{
border-color:inherit;
}
2)对于您希望使用继承边框颜色的任何元素,首先应用未指定颜色的边框,然后继承父边框颜色.
.myThing {
border:1px solid; /* this will inherit the parent color as the border-color */
border-color:inherit; /* this will inherit the parent's inherited border-color */
}
我们在第一步中创建的css规则将处理所有以前的元素border-color:inherit.然后在第二步中,我们需要手动覆盖这样一个事实:任何没有颜色指定的边框都将继承父颜色NOT border-color.所以边框颜色必须在边框设置后出现!
| 归档时间： |
|
| 查看次数： |
8713 次 |
| 最近记录： |