如何應用CSS類而不影響全局行爲

我正在使用具有自己的CSS類的第三方庫。這是DOM的外觀：如何應用CSS類而不影響全局行爲

<div id="toast-container" class="toast-custom" aria-live="polite" role="alert"> 
     <div class="toast toast-info" style="display: block;"> ....

這是我重寫對固定寬度

.toast-custom { 
    top: 0; 
    left: 30%; 
    width: 50%; 
}

這已經是由框架

#toast-container > div { 
    position: relative; 
    pointer-events: auto; 
    overflow: hidden; 
    margin: 0 0 6px; 
    padding: 15px 15px 15px 50px; 
    width: 46%; 
    -moz-border-radius: 3px 3px 3px 3px; 
    -webkit-border-radius: 3px 3px 3px 3px; 
    border-radius: 3px 3px 3px 3px; 
    background-position: 15px center; 
    background-repeat: no-repeat; 
    -moz-box-shadow: 0 0 12px #999999; 
    -webkit-box-shadow: 0 0 12px #999999; 
    box-shadow: 0 0 12px #999999; 
    color: #ffffff; 
    opacity: 0.8; 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
    filter: alpha(opacity=80); 
}

提供的類的類

我無法修改dix的寬度而無需觸摸#toast-container > div但如果我製作改爲#toast-container > div它將產生全球影響。如何使用.toast-custom進行必要的更改？

來源

2017-06-05 OpenStack

＃toast-container.toast-custom –

正如Steve G.寫的，使用更大的CSS特性（瞭解這一點）。 – Christina

你想覆蓋'id =「toast-container」'或者'id =「toast-container」'的子項？ –

，你遇到的是一個#「ID選擇」（如#my-rule）比.「類選擇」更具體的（如：.my-rule）的問題，而[最後]最具體的CSS選擇器（規則）獲勝。

這應該實現任何#toast-containers工作.toast-custom：

/* Note "no space" between */ 
#toast-container.toast-custom > div { 
    ... 
}

這是基本上說：「選擇嫡系#toast-containers的div元素也應用了.toast-custom類。」因爲這比框架的規則更具體，所以你的規則將會覆蓋，但只有在這種情況下。 - （#toast-containers這不實現.toast-custom應該不會受到影響）

從MDN

特異性是由哪些瀏覽器決定哪些CSS屬性值是最相關的一個手段元素，因此，將應用。

請參閱CSS Specificity關於MDN的更多信息。

來源

2017-06-05 20:23:16

這對我有效：'＃toast-container.toast-custom> div { ' – OpenStack

很高興爲你效勞，@OpenStack！ –

如何應用CSS類而不影響全局行爲

回答

相關問題