Jaki jest najprostszy sposób wyczyszczenia wszystkich pseudo klas na elemencie?

Question

Piszę arkusz stylów, aby rozszerzyć podstawowy arkusz stylów, którego CSS ma wiele pseudo klas zastosowanych do pewnych elementów. Chciałbym, aby mój arkusz stylów nadpisał niektóre z tych stylów jednym stylem, który jest stosowany do elementu bez względu na to, w jakim jest stanie, czy jest podwieszany, skupiony itp.

Na przykład podstawowy arkusz stylów może mieć style

.classname { 
    color:#f00; 
} 

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

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

ale dodanie następujących po tych stylów nie zastępują stany pseudo ...

.classname { 
    color:#fff; 
} 

następujące prace, ale czuje się dużo kodu na coś, co wydaje się prosta.

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

Podobnie Znam !important będzie działać, ale to zwykle znak ostrzegawczy słabo strukturze arkusza stylów.

Czy istnieje coś podobnego do .classname:*, które obejmowałoby każdy możliwy stan, lub po prostu usunąć wszystkie pseudo klasy?

Answer 1

Jeśli jesteś w stanie umieścić klas wewnątrz jakiegoś owinięcia id można zapobiec pseudoklas się skuteczne ze względu na specyfikę:

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

myślę, że to może być rozwiązane z pseudo-klasą :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

wsparcie Przeglądarka nie jest doskonały: https://developer.mozilla.org/en/docs/Web/CSS/:any

Edit:

Faktycznie, jak odkryłem, to odpowiedź nie jest bardzo dokładne. (Pomimo, że została przegłosowana 4 razy, lol).

• Przede wszystkim nie potrzebujesz do tego zadania :any. Potrzebujesz :any-link.

• Po drugie, :any jest wcześniejszą nazwą :matches. Dlatego w naszej terminologii powinniśmy używać pojęć :any-link i :matches i nie używać terminu :any.

Przykład wykorzystania :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link

Przykłady użycia :mathes: https://css-tricks.com/almanac/selectors/m/matches/

Nie edytowany sam kod, więc naprawić samemu według tej nowej informacji.