Importuj style selektora CSS w innym selektorze? (NOT @import)

Question

Czy istnieje sposób na zaimportowanie stylu pojedynczego selektora CSS do innego selektora CSS i dodanie do niego lub przepisanie z niego właściwości.

Powiedzmy:

.original_class{ 
background:black; 
color:white; 
} 
.overwrite{ 
@import(.original_class); /* I know this doesn't work */ 
color:blue; 
border:1px solid green; 
} 

można to osiągnąć tylko przez redeclaring się .original_class i przypisanie nowych wartości (od stylów CSS są przepisywane od góry do dołu), ale to nie zastąpi atrybuty oryginalnego CSS klasa. Czego chcę, to dziedziczenie jego właściwości do innej klasy bez konieczności ponownego ich zapisywania (duplikowanie).

Answer 1

Nie bezpośrednio, nie.

Można zrobić coś takiego w kodzie HTML:

<div class="original_class overwrite">...</div> 

ten będzie miał ten sam efekt, ale trzeba będzie to zrobić dla każdego elementu, który chcesz stylizowany tamtędy.

Istnieje również możliwość użycia wstępnego procesora CSS, takiego jak SASS, który obsługuje dziedziczenie/mixy.

Answer 2

Niestety nie. Przynajmniej nie bez jednego z tych fantazyjnych pluginów CSS, których nie dotknęłbym kilometrowego bieguna ...

Oczywiście nic nie stoi na przeszkodzie, aby mieć wiele klas na jednym elemencie.

Answer 3

Jeśli chcesz wziąć trochę objazdu, być może this jest dla Ciebie.

Answer 4

Możesz dodać selektor .overwrite do pierwszej reguły, oddzielając ją od istniejącego selektora z przecinkiem (grouping selectors), więc reguła selektor staje .original_class, .overwrite:

.original_class, 
.overwrite { 
background: black; 
color: white; 
} 
.overwrite { 
color: blue; 
border: 1px solid green; 
} 

Również, gdy piszesz:

ten zastąpi atrybuty oryginalnej klasy CSS

nie ma czegoś takiego jak atrybuty i klasy w CSS, a nie w zamierzonym rozumieniu OOP, jak sądzę. Istnieją reguły, reguły selektora (aby wybrać identyfikator HTML, klasy, elementy, atrybuty i inne pseudo), deklaracje, właściwości i wartości.