繼承另一個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;
}