继承另一个div的颜色？

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变量可能

或者，正如其他人提到的，通过给两个对象相同的类

Answer 2

有LESS之类的工具，可以让您在更高的抽象水平上编写CSS。

少称这些为“ Mixins”

代替

/* 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;
}