グローバルな動作に影響を与えずにCSSクラスを適用する方法

Question

私は独自のCSSクラスを持つサードパーティのライブラリを使用しています。

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

をこれは私がこれはすでにフレームワークによって

#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); 
} 

を提供するクラスです幅

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

を修正するためにオーバーライドしていたクラスである：これはDOMがどのように見えるかです

#toast-container > divに触れることなくdixの幅を変更することはできませんが、 #toast-container > divに変更すると、グローバルに影響します。 .toast-customを使用して必要な変更を行うにはどうすればよいですか？

Answer 1

あなたが抱えている問題は#「IDセレクタ」（例えば。#my-rule）が.「クラスセレクタ」よりも具体的であるということである（例えば。.my-rule）、および[最後]最も具体的なCSSセレクタ（ルール）勝。

これは、実装するすべての#toast-containersで動作するはずです.toast-custom：これは言って基本的にある

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

「もが.toast-customクラスが適用されていることdiv#toast-containersの要素直系の子孫を選択します。」それはフレームワークのルールよりも具体的なので、あなたのルールは上書きされますが、その場合のみです。 -

をMDNから

特異性は、 値はに最も関連するどのCSSプロパティを決めるブラウザするための手段です（。は.toast-customが影響を受けないはず実装していないことを#toast-containers）したがって、 が適用されます。

は、より多くの情報については、MDNにCSS Specificityを参照してください。