Question

我想将border-bottom设置为header.the边框颜色应与其子字体颜色相同。请找到html代码并建议我继续进行。

<header>
  <div class="cblt-panel">
     <header>
          <a href="HomePage;jsessionid=9Z1DRLtK8FfgmVDhysv4fk8LKjj1rTpSpJcS99dvcbffT4KTZ9tN!91184445">
             <div class="header-wrapper header"> 
                <h1 class="dealer-name">Airport Chevrolet Cadillac</h1>
             </div>
          </a>

     </header>

   </div>
</header>

在上面的标记中，我想设置外部标题标记的border-bottom-color与子h1标记的字体颜色相同。有可能吗？

Answer 1

我认为你不能通过纯CSS实现它。如果你能够使用jQuery，那很简单：

var h1Color = $('.dealer-name').css('color');
$('header:eq(0)').css('border-bottom-color', h1Color);

演示：http://jsfiddle.net/S9svs/

Answer 2

不，这是不可能的：在CSS中，父母从不继承孩子。

您可以将元素的边框颜色与自己的内容颜色（文本颜色）相同，即不设置边框颜色。但是要在孩子身上使用颜色集，你需要使用JavaScript。

更好的策略是组合设置，以便您只需将标题元素的颜色和封闭元素的颜色设置为相同的值。但是，这些设置需要在单独的规则中完成，例如， header { border-color: #060; } h1 { color: #060; }。

Answer 3

如果您确定要动态执行此操作，则必须使用 css预处理程序语言 ...

赞Less CSS

在这里你动态定义css并像在javascript中一样使用它...

例如，

@color:#000;
header { border-bottom-color:@color; }
header h1 { color:@color; }

Answer 4

有趣的是，border-color如果没有设置，则使用color属性来定义它的颜色，所以在某些情况下你可能会做相反的事情。例如：

header {
    color:red;
    border-bottom: 2px solid;
}

header a,header h1 {
    color:inherit;
}

DEMO：http://jsfiddle.net/brTTT/

在演示中，只需更改header color属性即可悬停以查看颜色更改。

css继承子属性

4 个答案: