CSS：将颜色设置为父级的背景颜色

Question

从下图：

如何使白框内的文字和图标与大框背景颜色相同？

以下是标记的外观

<div class="class-item blue-bg">
  <!--Heading stuff-->
  <div class="class-item-actions">
    <span class="pick-up-icon">
      <i class="fa fa-female fa-lg"></i>
      <i class="fa fa-child"></i>
    </span>
    <span class="full-day-icon blue">AM / PM</span>
    <span class="unapproved-projects-icon blue">
     2&nbsp;<i class="fa fa-th-large fa-lg fa-fw class-item-action"></i>
    </span>
    <i class="fa fa-unlock fa-lg></i>
  </div>
</div>

基本上，我怎么能这样做，所以我不需要将blue类添加到full-day-icon和unapproved-projects-icon，而是从{继承{蓝色} {1}}＆＃39; class-item？

编辑：这是相关的CSS

background-color

Answer 1

如果你可以使用CSS Variables，这是一个简洁明了的方法：

  .class-item {
    /** Specify the BG color in one place. **/
    --class-item-bg: #0076A5;
    padding: 10px;
    width: 90%;
    background-color: var(--class-item-bg);
    color: white;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0.85;
  }

  .full-day-icon {
    font-weight: bold;
    background: white;
    color: var(--class-item-bg);
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

  .unapproved-projects-icon {
    background-color: white;
    color: var(--class-item-bg);
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

您可以查看this fiddle，了解如何使用JavaScript更改属性，以便它影响使用它的所有CSS规则。

Answer 2

您无法在CSS中继承不同的属性。因此，儿童div无法为其cd /to/your/folder exa -T . ├── file1.txt ├── file2.csv ├── file3.py └── more_stuff └── file3.pyc 财产继承其background-color的父级。

color

为什么不直接应用样式？

.parent {
  background-color: red;
}
.child {
  color: inherit-background-color /* Not a way to do this without a preprocessor */
}

＆＃13;

＆＃13;

  .full-day-icon {
    color: #0076A5;
  }

＆＃13;

.class-item {
    padding: 10px;
    width: 90%;
    background-color: #0076A5;
    color: white;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0.85;
  }

  .full-day-icon {
    font-weight: bold;
    background: white;
    color: #0076A5;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

  .unapproved-projects-icon {
    background-color: white;
    color: #0076A5;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

＆＃13;

＆＃13;

＆＃13;