cssは優先順に優先されますが、必須ですか？importrant？

Question

私はこのコードを持っている：

[dir="ltr"] [icon-start] icon { 
    padding-right: 0.3em; 
} 

[dir="rtl"] [icon-start] icon { 
    padding-left: 0.3em; 
} 

.custom-icon { 
    padding: 0; 
} 

そして私は：

<div dir="ltr"> 
    <div icon-start> 
    <icon class="custom-icon"></icon> 
    </div> 
</div> 

アイコン要素は、これは望ましくない0 0.3em 0 0

のパディングであることが第一と第三のルールを組み合わせを動作。私はいつものようにCSSが正常に動作するようにして、最後のルールをショット・コール元にします。歓迎されていない

2可能な解決策、：

• アドオン= !important.custom-iconに - 歓迎していない、私は!important +の使用を最小限にしたいと私はする必要がないことを私のコードは、このような構造化重要です。
• .custom-iconの方向ルールを追加してください。私のバンドルのサイズ（これは1000の場所のように起こる必要があります）を膨らませるので望ましくない、非常に友好的ではなく、一般に誤解されることがあります。

ような何か：

[dir="ltr"] .custom-icon, [dir="rtl"] .custom-icon { 
    padding: 0 
} 

私は優先順位の構造で[dir]ルールを無視するようにCSSを伝えることができる方法はありますか？

Answer 1

私はCSSに優先順位構造の規則[dir]を無視するように伝える方法はありますか？

いいえ、1つのルールでカスケードから任意の他のルールを削除することはできません。あなたは!importantがオプションでない場合は、他のルールの特異性を一致させる必要があるとしている

：

[dir] [icon-start] .custom-icon { 
    padding: 0; 
} 

（技術的に、あなたも本当にの特異性を一致させるためにiconタイプセレクタを必要とするだろうクラスセレクタは、より具体的であるため、他のルールは、とにかくタイプセレクタは必要ありません）また

、あなたがそれらをオーバーライド心配する必要はありませんので、あなたが他のルールから.custom-iconを除外することもできます。

を

[dir="ltr"] [icon-start] icon:not(.custom-icon) { 
    padding-right: 0.3em; 
} 

[dir="rtl"] [icon-start] icon:not(.custom-icon) { 
    padding-left: 0.3em; 
}