Question

我有一些不同颜色的主题

我想边框div“ItemListHeader”继承另一个div“color1”的颜色，它不是父级（结构HTML贝娄）可能与css或js？谢谢，

#color1{
    background-color: rgba(11, 114, 180, 1);
}
#color2{
    background-color: rgba(1, 14, 18, 0);
}
.ItemListHeader{
border-right: 30px solid (inherit);
}

<div class="List">
<ul class="Menu">
    <li class="topic1">
        <div  id="color1" class="ColorBaseTopics"></div>
            <ul class="SubTopic1">
                <li>
                    <div class="ItemListHeader">
                    
                    </div>
                </li>
            </ul>
    </li>
      <li class="topic2">
        <div  id="color2" class="ColorBaseTopics"></div>
            <ul class="SubTopic2">
                <li>
                    <div class="ItemListHeader">
                    
                    </div>
                </li>
            </ul>
    </li>
</ul>
</div>

Answer 1

可以使用sass variables

或者，正如其他人所提到的那样，通过赋予两个对象相同的类

Answer 2

有像LESS这样的工具，它们允许你在更高的抽象层次上编写CSS。

少打电话给这些＆＃34; Mixins＆＃34;

而不是

/* CSS */
#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

你可以说

/* LESS */
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

继承另一个div的颜色？

2 个答案: