要素のすべての疑似クラスを消去する最も簡単な方法は何ですか？

Question

私はCSSが多くの擬似クラスを特定の要素に適用している基本スタイルシートを拡張するためのスタイルシートを作成しています。スタイルシートは、スタイルシートが、どのような状態であっても、フォーカスされているかどうかにかかわらず、要素に適用される単一のスタイルでこれらのスタイルをオーバーライドしたいと考えています。

たとえば、

.classname { 
    color:#f00; 
} 

.classname:hover { 
    color:#0f0; 
} 

.classname:active { 
    color:#00f; 
} 

が、疑似状態をオーバーライドしないこれらのスタイルの後に次を追加...

.classname { 
    color:#fff; 
} 

以下の作品が、それは簡単なようで何かのためのコードの多くを感じています。

.classname, 
.classname:active, 
.classname:hover, 
.classname:focus, 
.classname:visited, 
.classname:valid{ 
    color:#fff; 
    } 

は同様に、私は!importantが働くだろう知っているが、それは通常悪い構造化されたスタイルシートの警告サインです。

.classname:*の行には、すべての可能な状態をカバーするものがありますか、または単純にすべての疑似クラスを削除する方法はありますか？

Answer 1

あなたが原因特異性を有効にする擬似クラスを防ぐことができますidいくつかのラッパー内のクラスを置くことができる場合：

body { 
 
    background: black; 
 
} 
 
.classname { 
 
    color:#f00; 
 
} 
 
.classname:hover { 
 
    color:#0f0; 
 
} 
 
.classname:active { 
 
    color:#00f; 
 
} 
 
#a .classname { 
 
    color:#fff; 
 
}

<div class="classname">all pseudo works</div> 
 

 
<div id="a"> 
 
    <div class="classname">none of the pseudo works</div> 
 
</div>

Answer 2

私が思うに、それは解決できます疑似クラス:anyである。

<a href="google.com">Google</a> 

<style> 
a:link { color: blue; } 
a:hover { color: red; } 
a:-webkit-any(a) { color: green; } 
</style> 

https://jsfiddle.net/ycfokuju

ブラウザのサポートは完璧ではない：https://developer.mozilla.org/en/docs/Web/CSS/:any

編集：私は発見したとして

は実は、この答えは非常に正確ではありません。 （それにもかかわらず、4回upvoted、笑）。

• まず、:anyはこのタスクを実行する必要はありません。 :any-linkが必要です。

• 第2の点は、:any自体が元の名前の:matchesであることです。したがって、用語では:any-linkと:matchesという用語を使用し、用語:anyは使用しないでください。 :any-linkを使用しての

例：:mathesを使用してのhttps://developer.mozilla.org/en-US/docs/Web/CSS/:any-link

例：https://css-tricks.com/almanac/selectors/m/matches/

私は、コード自体を編集したので、この新しい情報に基づいてそれを自分で解決していません。