Czy klasa CSS może dziedziczyć jedną lub więcej innych klas?

Czuję się głupio, że od tak dawna jestem programistą i nie znam odpowiedzi na to pytanie, mam nadzieję, że jest to możliwe i po prostu nie wiedziałem raczej o tym, niż jak sądzę (jest to niemożliwe) .

Moje pytanie brzmi, czy można stworzyć klasę CSS, która „odziedziczy” po innej klasie CSS (lub więcej niż jednej).

Powiedzmy, że mieliśmy:

.something { display:inline }
.else      { background:red }

Chciałbym zrobić coś takiego:

.composite 
{
   .something;
   .else
}

gdzie klasa „.composite” wyświetlałaby się w linii i miała czerwone tło

Istnieją narzędzia takie jak LESS , które pozwalają komponować CSS na wyższym poziomie abstrakcji podobnym do tego, co opisujesz.

Mniej nazywa te „Mixiny”

Zamiast

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Można powiedzieć

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Możesz dodać wiele klas do jednego elementu DOM, np

<div class="firstClass secondClass thirdclass fourthclass"></div>

Reguły podane w późniejszych klasach (lub które są bardziej szczegółowe) zastępują. Więc…fourthclass w tym przykładzie zwycięża.

Dziedziczenie nie jest częścią standardu CSS.

Tak, ale nie dokładnie z tą składnią.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Trzymaj wspólne atrybuty razem i ponownie przypisuj określone (lub zastępuj) atrybuty.

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

Element może przyjmować wiele klas:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

I to jest tak blisko, jak niestety się zbliżysz. Chciałbym kiedyś zobaczyć tę funkcję wraz z aliasami klas.

Nie, nie możesz zrobić czegoś takiego

.composite 
{
   .something;
   .else
}

To nie są nazwy „klasowe” w sensie OO. .somethingi .elsesą tylko selektorami.

Ale możesz albo określić dwie klasy dla elementu

<div class="something else">...</div>

lub możesz spojrzeć na inną formę dziedziczenia

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

Gdzie akapity kolor tła i kolor są dziedziczone z ustawień w otaczającym div, który jest w .foostylu. Może być konieczne sprawdzenie dokładnej specyfikacji W3C. inheriti tak jest domyślny dla większości właściwości, ale nie dla wszystkich.

Natknąłem się na ten sam problem i ostatecznie skorzystałem z rozwiązania JQuery, aby wyglądało na to, że klasa może dziedziczyć inne klasy.

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

Znajduje to wszystkie elementy z klasą „composite” i dodaje klasy „coś” i „else” do elementów. Coś w stylu<div class="composite">...</div> skończy się tak:
<div class="composite something else">...</div>

Sposób SCSS dla podanego przykładu wyglądałby następująco:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

Więcej informacji, sprawdź podstawy sassa

Najlepsze, co możesz zrobić, to to

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

Nie zapomnij:

div.something.else {

    // will only style a div with both, not just one or the other

}

W pliku Css:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

Zdaję sobie sprawę, że to pytanie jest teraz bardzo stare, ale tutaj nie ma nic!

Jeśli celem jest dodanie jednej klasy, która implikuje właściwości wielu klas, jako rozwiązanie natywne, poleciłbym użycie JavaScript / jQuery (jQuery nie jest tak naprawdę konieczne, ale na pewno przydatne)

Jeśli tak, na przykład .umbrellaClass„dziedziczy” .baseClass1i .baseClass2możesz mieć JavaScript, który uruchamia się w trybie gotowości.

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

Teraz wszystkie elementy .umbrellaClassbędą miały wszystkie właściwości obu .baseClasss. Należy pamiętać, że podobnie jak dziedziczenie OOP .umbrellaClassmoże, ale nie musi, mieć własne właściwości.

Jedynym zastrzeżeniem jest tutaj rozważenie, czy istnieją dynamicznie tworzone elementy, które nie będą istnieć podczas uruchamiania tego kodu, ale istnieją również proste sposoby obejścia tego.

Sucks css nie ma jednak natywnego dziedzictwa.

Idealny czas : przeszedłem od tego pytania do mojego e-maila, aby znaleźć artykuł o Less , bibliotece Ruby, która między innymi to robi:

Ponieważ super wygląda to tak footer, ale z inną czcionką, użyję techniki włączenia klasy Less (nazywają ją mixinem), aby powiedzieć jej, aby zawierała również te deklaracje:

#super {
  #footer;
  font-family: cursive;
}

Niestety CSS nie zapewnia „dziedziczenia” w sposób, w jaki robią to języki programowania, takie jak C ++, C # lub Java. Nie można zadeklarować klasy CSS, a następnie rozszerzyć ją o inną klasę CSS.

Możesz jednak zastosować więcej niż jedną klasę do znacznika w znacznikach ... w takim przypadku istnieje wyrafinowany zestaw reguł, które określają, które style zostaną zastosowane przez przeglądarkę.

<span class="styleA styleB"> ... </span>

CSS wyszuka wszystkie style, które można zastosować na podstawie tego, co znaczniki, i połączy style CSS z tych wielu reguł razem.

Zazwyczaj style są łączone, ale gdy pojawiają się konflikty, później zadeklarowany styl na ogół wygrywa (chyba że! Ważny atrybut jest określony w jednym ze stylów, w którym to przypadku wygrywa). Również style zastosowane bezpośrednio do elementu HTML mają pierwszeństwo przed stylami klas CSS.

Istnieje również SASS, który można znaleźć na stronie http://sass-lang.com/ . Istnieje tag @extend, a także system wprowadzania wtyczek. (Rubin)

To rodzaj konkurenta dla MNIEJ.

To nie jest możliwe w CSS.

Jedyną rzeczą obsługiwaną w CSS jest bycie bardziej szczegółowym niż inna reguła:

span { display:inline }
span.myclass { background: red }

Rozpiętość z klasą „myclass” będzie miała obie właściwości.

Innym sposobem jest określenie dwóch klas:

<div class="something else">...</div>

Styl „else” zastąpi (lub doda) styl „czegoś”

Możesz zastosować więcej niż jedną klasę CSS do elementu przez coś takiego jak ta klasa = „coś innego”

Jak powiedzieli inni, możesz dodać wiele klas do elementu.

Ale tak naprawdę nie o to chodzi. Dostaję twoje pytanie dotyczące dziedziczenia. Prawdziwe jest to, że dziedziczenie w CSS odbywa się nie poprzez klasy, ale poprzez hierarchie elementów. Aby modelować odziedziczone cechy, musisz zastosować je do różnych poziomów elementów w DOM.

Szukałem tego też jak szalonego i właśnie to rozgryzłem, próbując różnych rzeczy: P ... Cóż, możesz to zrobić w ten sposób:

composite.something, composite.else
{
    blblalba
}

Nagle zadziałało dla mnie :)

W szczególnych okolicznościach możesz wykonać „miękkie” dziedzictwo:

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

Działa to tylko wtedy, gdy dodajesz klasę .composite do elementu potomnego. Jest to „miękkie” dziedziczenie, ponieważ wszelkie wartości nieokreślone w .composite nie są dziedziczone w sposób oczywisty. Pamiętaj, że nadal byłoby mniej znaków, aby po prostu napisać „inline” i „red” zamiast „inherit”.

Oto lista właściwości i tego, czy robią to automatycznie: https://www.w3.org/TR/CSS21/propidx.html

Chociaż bezpośrednie dziedziczenie nie jest możliwe.

Możliwe jest użycie klasy (lub identyfikatora) dla znacznika nadrzędnego, a następnie użycie kombinacji CSS w celu zmiany zachowania znacznika potomnego z jego dziedziczności.

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

Nie sugerowałbym używania tak wielu rozpiętości jak w przykładzie, jednak jest to tylko dowód koncepcji. Nadal istnieje wiele błędów, które mogą wystąpić podczas próby zastosowania CSS w ten sposób. (Na przykład zmiana typów dekoracji tekstowych).

Mniej i Sass to wstępne procesory CSS, które w cenny sposób rozszerzają język CSS. Tylko jedno z wielu ulepszeń, które oferują, to tylko opcja, której szukasz. Istnieje kilka bardzo dobrych odpowiedzi z Less i dodam rozwiązanie Sass.

Sass ma opcję rozszerzania, która pozwala na pełne rozszerzenie jednej klasy na inną. Więcej o rozszerzeniu można przeczytać w tym artykule

Właściwie to, o co prosisz, istnieje - ale robi się to jako moduły dodatkowe. Sprawdź to pytanie na Better CSS w .NET dla przykładów.

Sprawdź odpowiedź Larsenala na temat używania LESS, aby dowiedzieć się, co robią te dodatki.

CSS tak naprawdę nie robi tego, o co prosisz. Jeśli chcesz pisać reguły z myślą o tym złożonym pomyśle, możesz sprawdzić kompas . Jest to struktura arkuszy stylów, która wygląda podobnie do wspomnianej już Less.

Pozwala robić miksy i wszystkie te dobre interesy.

Dla tych, którzy nie są zadowoleni ze wspomnianych (doskonałych) postów, możesz użyć swoich umiejętności programistycznych, aby stworzyć zmienną (PHP lub dowolną inną) i przechowywać w niej wiele nazw klas.

To najlepszy hack, jaki mogłem wymyślić.

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

Następnie zastosuj zmienną globalną do pożądanego elementu, a nie do samych nazw klas

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Spójrz na komponowanie CSS : https://bambielli.com/til/2017-08-11-css-modules-composes/

według nich:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

Używam go w moim projekcie reagowania.

Nie myśl o klasach css jako klasach obiektowych, myśl o nich jako o narzędziu pośród innych selektorów do określania, które klasy atrybutów mają być stylowane w elemencie HTML. Pomyśl o wszystkim między nawiasami klamrowymi jak o klasie atrybutów , a selektory po lewej stronie informują elementy, które wybierają, aby dziedziczyć atrybuty z klasy atrybutów . Przykład:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

Gdy element jest podany atrybut class="foo", warto pomyśleć o tym, jak nie dziedziczy atrybuty z klasy .foo, ale z atrybutem klasy A i klasy B atrybut . Tj. Wykres dziedziczenia ma głębokość jednego poziomu, a elementy pochodzą z klas atrybutów , a selektory określają, gdzie idą krawędzie, i określają pierwszeństwo, gdy istnieją konkurujące atrybuty (podobnie do kolejności rozwiązywania metod).

Praktyczne implikacje dla programowania są następujące. Załóżmy, że masz arkusz stylów podane powyżej, a chcesz dodać nową klasę .baz, gdzie powinien mieć takie same font-sizejak .foo. Naiwnym rozwiązaniem byłoby:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

Za każdym razem, gdy muszę coś wpisać dwa razy, tak się wściekam! Nie tylko muszę to napisać dwa razy, ale teraz nie mam możliwości programowego wskazania tego .fooi .bazpowinienem mieć to samo font-size, i stworzyłem ukrytą zależność! Mój powyższy paradygmat sugeruje, że powinienem wyodrębnić font-sizeatrybut z klasy atrybutów A :

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

Główny zarzut jest to, że teraz muszę wpisywać każdy z selektora atrybutu klasy A ponownie, aby określić, które elementy powinny wybrać powinien również dziedziczą atrybuty z klasy bazowej przyporządkowują . Nadal jednak trzeba pamiętać, aby edytować każdą klasę atrybutów, w której istnieją ukryte zależności za każdym razem, gdy coś się zmienia, lub korzystać z narzędzia innej firmy. Pierwsza opcja rozśmiesza boga, druga sprawia, że ​​chcę się zabić.

Jeśli chcesz mocniejszego preprocesora tekstu niż LESS, sprawdź PPWizard:

http://dennisbareis.com/ppwizard.htm

Ostrzeżenie: witryna jest naprawdę ohydna i ma małą krzywą uczenia się, ale jest idealna do tworzenia zarówno CSS, jak i kodu HTML za pomocą makr. Nigdy nie zrozumiałem, dlaczego więcej programistów internetowych tego nie używa.

Możesz osiągnąć to, co chcesz, jeśli wstępnie przetworzysz pliki .css przez php. ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...