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>