Bisakah kelas CSS mewarisi satu atau lebih kelas lain?

Saya merasa bodoh karena telah menjadi programmer web begitu lama dan tidak mengetahui jawaban untuk pertanyaan ini, saya benar-benar berharap itu mungkin dan saya hanya tidak tahu tentang daripada apa yang saya pikir jawabannya (yaitu bahwa itu tidak mungkin) .

Pertanyaan saya adalah apakah mungkin membuat kelas CSS yang "mewarisi" dari kelas CSS lain (atau lebih dari satu).

Misalnya, katakan kita punya:

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

Yang ingin saya lakukan adalah sesuatu seperti ini:

.composite 
{
   .something;
   .else
}

di mana kelas ".composite" akan menampilkan inline dan memiliki latar belakang merah

Ada alat-alat seperti KURANG , yang memungkinkan Anda untuk menyusun CSS pada tingkat abstraksi yang lebih tinggi seperti yang Anda gambarkan.

Lebih sedikit menyebut "Mixin" ini

Dari pada

/* 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;
}

Anda bisa mengatakan

/* LESS */

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

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Anda dapat menambahkan beberapa kelas ke elemen DOM tunggal, misalnya

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

Aturan yang diberikan di kelas selanjutnya (atau yang lebih spesifik) menimpanya. Jadi fourthclassdalam contoh itu jenis menang.

Warisan bukan bagian dari standar CSS.

Ya, tetapi tidak persis dengan sintaks itu.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Menyatukan atribut umum Anda dan menetapkan atribut spesifik (atau menimpa) lagi.

/*  ------------------------------------------------------------------------------ */   
/*  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;
}

Suatu elemen dapat mengambil beberapa kelas:

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

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

Dan itu sedekat yang Anda dapatkan sayangnya. Saya akan senang melihat fitur ini, bersama dengan alias kelas lain suatu hari nanti.

Tidak, Anda tidak dapat melakukan sesuatu seperti

.composite 
{
   .something;
   .else
}

Ini bukan nama "kelas" dalam arti OO. .somethingdan.else hanya penyeleksi tidak lebih.

Tapi Anda bisa menentukan dua kelas pada suatu elemen

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

atau Anda mungkin melihat ke bentuk warisan lain

.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>

Di mana paragraf backgroundcolor dan warna diwariskan dari pengaturan di div terlampir yang .fooditata. Anda mungkin harus memeriksa spesifikasi W3C yang tepat. inheritstandar untuk sebagian besar properti, tetapi tidak untuk semua.

Saya mengalami masalah yang sama dan akhirnya menggunakan solusi JQuery untuk membuatnya tampak seperti kelas dapat mewarisi kelas lain.

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

Ini akan menemukan semua elemen dengan kelas "komposit" dan menambahkan kelas "sesuatu" dan "lain" ke elemen. Jadi sesuatu seperti <div class="composite">...</div>akan berakhir seperti:
<div class="composite something else">...</div>

Cara SCSS untuk contoh yang diberikan, akan menjadi sesuatu seperti:

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

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

Info lebih lanjut, periksa dasar-dasar sass

Yang terbaik yang dapat Anda lakukan adalah ini

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>

Jangan lupa:

div.something.else {

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

}

Dalam file Css:

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

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

Saya menyadari pertanyaan ini sekarang sudah sangat tua, tetapi tidak apa-apa!

Jika maksudnya adalah untuk menambahkan kelas tunggal yang menyiratkan properti dari beberapa kelas, sebagai solusi asli, saya akan merekomendasikan menggunakan JavaScript / jQuery (jQuery benar-benar tidak perlu tetapi tentu berguna)

Jika sudah, misalnya .umbrellaClassyang "mewarisi" dari .baseClass1dan .baseClass2Anda bisa memiliki JavaScript yang siap menyala.

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

Sekarang semua elemen .umbrellaClassakan memiliki semua properti dari keduanya .baseClass. Perhatikan bahwa, seperti warisan OOP,.umbrellaClass mungkin atau mungkin tidak memiliki propertinya sendiri.

Satu-satunya peringatan di sini adalah untuk mempertimbangkan apakah ada elemen yang dibuat secara dinamis yang tidak akan ada ketika kode ini diaktifkan, tetapi ada juga cara-cara sederhana untuk melakukannya.

Sucks css tidak memiliki warisan asli.

Waktu yang tepat : Saya beralih dari pertanyaan ini ke email saya, untuk menemukan artikel tentang Less , pustaka Ruby yang antara lain melakukan ini:

Karena super terlihat seperti footer, tetapi dengan font yang berbeda, saya akan menggunakan teknik inklusi kelas Less (mereka menyebutnya mixin) untuk mengatakannya untuk menyertakan deklarasi ini juga:

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

Sayangnya, CSS tidak menyediakan 'warisan' seperti bahasa pemrograman seperti C ++, C # atau Java. Anda tidak dapat mendeklarasikan kelas CSS dan kemudian memperluasnya dengan kelas CSS lain.

Namun, Anda dapat menerapkan lebih dari satu kelas pada tag di markup Anda ... dalam hal ini ada seperangkat aturan canggih yang menentukan gaya aktual mana yang akan diterapkan oleh browser.

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

CSS akan mencari semua gaya yang dapat diterapkan berdasarkan apa markup Anda, dan menggabungkan gaya CSS dari beberapa aturan bersama.

Biasanya, gaya digabungkan, tetapi ketika konflik muncul, gaya dinyatakan kemudian umumnya akan menang (kecuali atribut! Penting ditentukan pada salah satu gaya, dalam hal ini yang menang). Selain itu, gaya yang diterapkan secara langsung ke elemen HTML lebih diutamakan daripada gaya kelas CSS.

Ada juga SASS, yang dapat Anda temukan di http://sass-lang.com/ . Ada tag @extend, serta sistem tipe campuran. (Rubi)

Ini semacam pesaing bagi KURANG.

Itu tidak mungkin di CSS.

Satu-satunya hal yang didukung dalam CSS menjadi lebih spesifik daripada aturan lain:

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

Rentang dengan kelas "myclass" akan memiliki kedua properti.

Cara lain adalah dengan menentukan dua kelas:

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

Gaya "lain" akan menggantikan (atau menambah) gaya "sesuatu"

Anda dapat menerapkan lebih dari satu kelas CSS ke elemen dengan sesuatu seperti kelas ini = "sesuatu yang lain"

Seperti yang dikatakan orang lain, Anda bisa menambahkan beberapa kelas ke suatu elemen.

Tapi bukan itu intinya. Saya mendapatkan pertanyaan Anda tentang warisan. Poin sebenarnya adalah bahwa pewarisan dalam CSS dilakukan bukan melalui kelas, tetapi melalui hierarki elemen. Jadi untuk memodelkan sifat-sifat bawaan Anda perlu menerapkannya ke berbagai tingkat elemen dalam DOM.

Saya mencari itu seperti orang gila juga dan saya baru saja mengetahuinya dengan mencoba hal-hal yang berbeda: P ... Anda dapat melakukannya seperti itu:

composite.something, composite.else
{
    blblalba
}

Tiba-tiba bekerja untuk saya :)

Dalam keadaan tertentu Anda dapat melakukan warisan "lunak":

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

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

Ini hanya berfungsi jika Anda menambahkan kelas .composite ke elemen turunan. Ini adalah warisan "lunak" karena nilai apa pun yang tidak ditentukan dalam .komposit tidak diwariskan secara jelas. Ingatlah bahwa karakter yang masih kurang untuk hanya menulis "inline" dan "red" bukannya "inherit".

Berikut adalah daftar properti dan apakah mereka melakukannya secara otomatis: https://www.w3.org/TR/CSS21/propidx.html

Sementara pewarisan langsung tidak mungkin.

Dimungkinkan untuk menggunakan kelas (atau id) untuk tag induk dan kemudian menggunakan kombinator CSS untuk mengubah perilaku tag anak dari heirarki itu.

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>

Saya tidak akan menyarankan menggunakan banyak bentang seperti contoh, namun itu hanya bukti konsep. Masih ada banyak bug yang dapat muncul ketika mencoba menerapkan CSS dengan cara ini. (Misalnya mengubah jenis dekorasi teks).

Less dan Sass adalah pra-prosesor CSS yang memperluas bahasa CSS dengan cara yang berharga. Hanya satu dari banyak perbaikan yang mereka tawarkan hanyalah opsi yang Anda cari. Ada beberapa jawaban yang sangat bagus dengan Less dan saya akan menambahkan solusi Sass.

Sass memiliki opsi perpanjangan yang memungkinkan satu kelas diperluas sepenuhnya ke kelas lainnya. Lebih lanjut tentang perpanjangan Anda dapat membaca di artikel ini

Sebenarnya apa yang Anda minta ada - namun itu dilakukan sebagai modul tambahan. Lihatlah pertanyaan ini tentang CSS yang Lebih Baik di .NET untuk contoh.

Lihat jawaban Larsenal tentang menggunakan KURANG untuk mendapatkan ide tentang apa yang dilakukan pengaya ini.

CSS tidak benar - benar melakukan apa yang Anda minta. Jika Anda ingin menulis aturan dengan ide komposit itu dalam pikiran, Anda mungkin ingin memeriksa kompas . Ini kerangka kerja stylesheet yang terlihat mirip dengan Less yang telah disebutkan.

Ini memungkinkan Anda melakukan mixin dan semua bisnis yang baik itu.

Bagi mereka yang tidak puas dengan posting yang disebutkan (sangat baik), Anda dapat menggunakan keterampilan pemrograman Anda untuk membuat variabel (PHP atau yang mana saja) dan membuatnya menyimpan beberapa nama kelas.

Itu hack terbaik yang bisa saya buat.

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

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

Kemudian terapkan variabel global ke elemen yang Anda inginkan daripada nama kelas itu sendiri

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

Lihatlah susunan CSS : https://bambielli.com/til/2017-08-11-css-modules-composes/

Menurut mereka:

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

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

Saya menggunakannya dalam proyek reaksi saya.

Jangan menganggap kelas css sebagai kelas berorientasi objek, anggaplah mereka hanya sebagai alat di antara penyeleksi lainnya untuk menentukan kelas atribut mana yang ditata oleh elemen html. Pikirkan segala sesuatu di antara kawat gigi sebagai kelas atribut , dan penyeleksi di sebelah kiri memberi tahu elemen yang mereka pilih untuk mewarisi atribut dari kelas atribut . Contoh:

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

Ketika unsur diberikan atribut class="foo", hal ini berguna untuk memikirkan itu tidak mewarisi atribut dari kelas .foo, tapi dari atribut kelas A dan kelas atribut B . Yaitu, grafik warisan adalah satu tingkat dalam, dengan elemen yang berasal dari kelas atribut , dan penyeleksi menentukan kemana tepi pergi, dan menentukan prioritas ketika ada atribut yang bersaing (mirip dengan urutan resolusi metode).

Implikasi praktis untuk pemrograman adalah ini. Katakanlah Anda memiliki style sheet yang diberikan di atas, dan ingin menambahkan kelas baru .baz, di mana ia harus sama font-sizedengan .foo. Solusi naif adalah:

.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! */}

Setiap kali saya harus mengetik sesuatu dua kali, saya menjadi sangat marah! Saya tidak hanya harus menulisnya dua kali, tetapi sekarang saya tidak memiliki cara untuk menunjukkan secara terprogram .foodan .bazseharusnya memiliki yang sama font-size, dan saya telah menciptakan ketergantungan tersembunyi! Paradigma saya di atas akan menyarankan bahwa saya harus abstrak font-sizeatribut dari atribut class 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 */}

Keluhan utama di sini adalah bahwa sekarang aku harus mengetik ulang setiap pemilih dari atribut kelas A lagi untuk menentukan bahwa unsur-unsur mereka harus memilih harus atribut juga mewarisi dari kelas dasar atribut A . Namun, alternatif harus diingat untuk mengedit setiap kelas atribut di mana ada dependensi tersembunyi setiap kali ada perubahan, atau menggunakan alat pihak ketiga. Opsi pertama membuat tawa tertawa, yang kedua membuat saya ingin bunuh diri.

Jika Anda ingin preprocessor teks yang lebih kuat daripada KURANG, periksa PPWizard:

http://dennisbareis.com/ppwizard.htm

Peringatan situs web benar-benar mengerikan dan ada kurva belajar yang kecil, tetapi itu sempurna untuk membangun kode CSS dan HTML melalui makro. Saya tidak pernah mengerti mengapa lebih banyak web coders tidak menggunakannya.

Anda dapat mencapai apa yang Anda inginkan jika Anda memproses file .css Anda melalui php. ...

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

...