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，而是它继承class-item蓝色的background-color？

编辑：下面是相关CSS

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

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

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

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无法继承它的父项的background-color，因为它的color属性。

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

为什么不直接应用样式？

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

.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; 
 
    }

<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>