1

我想给 header-bottom 赋予边框颜色。边框颜色应该与其子字体颜色相同。请找到 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>

在上面的标记中，我想将外部标题标签的边框底部颜色设置为与子 h1 标签的字体颜色相同。可能吗 ？

4

4 回答 4

2

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

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

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

于 2013-03-22T06:05:08.720 回答
1

不，这是不可能的：在 CSS 中，父母永远不会从孩子那里继承。

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

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

于 2013-03-22T06:06:08.957 回答
0

The funny thing is that border-color, if not set, uses the color property to define it's color, so in some occasions you may be able to do the opposite. eg:

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

header a,header h1 {
    color:inherit;
}

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

In the demo, hover to see the color change by just changeing the header color property.

于 2013-03-22T07:48:16.227 回答
0

如果您确实想动态地执行此操作，那么您必须为其使用css 预处理器语言...

喜欢少 CSS

在这里，您可以动态定义 css 并像在 javascript 中一样使用它...

例如，

@color:#000;
header { border-bottom-color:@color; }
header h1 { color:@color; }
于 2013-03-22T06:12:21.390 回答