Bir CSS sınıfı bir veya daha fazla sınıfı devralabilir mi?

Çok uzun süredir web programcısı olduğum için ve bu sorunun cevabını bilmediğim için aptal hissediyorum, aslında umarım bu mümkün ve cevap olduğunu düşündüğümden çok bilmiyordum (ki bu mümkün değil) .

Benim sorum, başka bir CSS sınıfından (veya birden fazla) "miras alan" bir CSS sınıfı oluşturmanın mümkün olup olmadığıdır.

Örneğin, diyelim ki:

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

Ne yapmak istiyorum böyle bir şey:

.composite 
{
   .something;
   .else
}

burada ".composite" sınıfı hem satır içi hem de kırmızı bir arka plana sahiptir

LESS gibi , tarif ettiğinize benzer şekilde daha yüksek bir soyutlama düzeyinde CSS oluşturmanıza izin veren araçlar vardır .

Daha azı bu "Mixins"

Onun yerine

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

Söyleyebilirdin

/* LESS */

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

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Tek bir DOM öğesine birden fazla sınıf ekleyebilirsiniz, ör.

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

Daha sonraki sınıflarda verilen (veya daha spesifik olan) kurallar geçersiz kılınır. Yani fourthclassbu örnekte hüküm sürüyor.

Kalıtım CSS standardının bir parçası değildir.

Evet, ama tam olarak bu sözdizimiyle değil.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Ortak özniteliklerinizi bir arada tutun ve belirli öznitelikleri (veya geçersiz kılma) yeniden atayın.

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

Bir öğe birden fazla sınıf alabilir:

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

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

Ve bu ne yazık ki alacağınız kadar yakın. Bir gün sınıf takma adlarıyla birlikte bu özelliği görmek isterim.

Hayır böyle bir şey yapamazsın

.composite 
{
   .something;
   .else
}

Bu, OO anlamında "sınıf" adları değildir. .somethingve .elsesadece seçiciler değiller.

Ancak bir öğe üzerinde iki sınıf belirtebilirsiniz

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

ya da başka bir kalıtım biçimine bakabilirsiniz

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

Paragrafların arka plan rengi ve rengi, ekteki div içindeki .foostil ayarlarından miras alınır . Tam W3C spesifikasyonunu kontrol etmeniz gerekebilir. inherityine de çoğu özellik için varsayılan değerdir ancak tümü için geçerli değildir.

Ben aynı sorunla karşılaştı ve bir sınıf diğer sınıfları devralabilir gibi görünmesini sağlamak için bir JQuery çözümü kullanarak sona erdi.

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

Bu, "bileşik" sınıfındaki tüm öğeleri bulur ve öğelere "bir şey" ve "başka" sınıflarını ekler. Yani böyle bir şey şöyle <div class="composite">...</div>sonuçlanacak:
<div class="composite something else">...</div>

SCSS verilen örneğin yolu, gibi bir şey olacaktır:

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

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

Daha fazla bilgi, sass temellerini kontrol edin

Yapabileceğiniz en iyi şey bu

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>

Unutmayın:

div.something.else {

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

}

Css dosyasında:

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

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

Bu sorunun artık çok eski olduğunu anlıyorum ama işte burada hiçbir şey yok!

Amaç, yerel bir çözüm olarak birden çok sınıfın özelliklerini ima eden tek bir sınıf eklemekse, JavaScript / jQuery kullanmanızı öneririm (jQuery gerçekten gerekli değil ama kesinlikle yararlıdır)

Eğer varsa, örneğin .umbrellaClass"devralır" o .baseClass1ve .baseClass2bazı JavaScript hazır o yangınlar olabilir.

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

Şimdi tüm unsurları .umbrellaClassher ikisinin de tüm özelliklerine sahip olacaktır .baseClass. OOP mirası gibi .umbrellaClass, kendi özelliklerine sahip olabileceğini veya olmayabileceğini unutmayın.

Buradaki tek uyarı, bu kod tetiklendiğinde var olmayacak dinamik olarak oluşturulan öğeler olup olmadığını düşünmektir, ancak bunun çevresinde de basit yollar vardır.

Berbat css yerel mirasa sahip değil.

Mükemmel zamanlama : Bu sorudan e-postalarıma gittim, Less , Ruby kütüphanesi hakkında başka şeyler de yapan bir makale bulmak için :

Yana super tıpkı görünüyor footer, ancak farklı bir yazı tipiyle, ben (onlar mixin diyoruz) bunları da beyanlarını eklemeyi söylemek için daha az sınıf içerme tekniğini kullanacağız:

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

Ne yazık ki, CSS, C ++, C # veya Java gibi programlama dillerinin yaptığı şekilde 'kalıtım' sağlamaz. Bir CSS sınıfını bildiremez ve başka bir CSS sınıfıyla genişletemezsiniz.

Bununla birlikte, işaretlemenizdeki bir etikete tek bir sınıftan fazlasını uygulayabilirsiniz ... bu durumda tarayıcı tarafından hangi gerçek stillerin uygulanacağını belirleyen karmaşık bir kurallar kümesi vardır.

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

CSS, işaretlemenize göre uygulanabilecek tüm stilleri arayacak ve bu çoklu kurallardan CSS stillerini bir araya getirecektir.

Tipik olarak stiller birleştirilir, ancak çakışmalar ortaya çıktığında, daha sonra bildirilen stil genellikle kazanır (stillerden birinde!! Önemli özniteliği belirtilmedikçe, bu durumda kazanır). Ayrıca, doğrudan bir HTML öğesine uygulanan stiller, CSS sınıfı stillerine göre önceliklidir.

Ayrıca http://sass-lang.com/ adresinde bulabileceğiniz SASS var. . Bir @extend etiketi ve bir karma giriş sistemi var. (Yakut)

Bu biraz daha az rakip.

Bu CSS'de mümkün değil.

CSS'de desteklenen tek şey başka bir kuraldan daha spesifik olmaktır:

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

Sınıf "myclass" olan bir span her iki özelliğe de sahip olacaktır.

Başka bir yol da iki sınıf belirtmektir:

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

"Else" stili, "bir şey" stilini geçersiz kılar (veya ekler)

Bir öğeye bu sınıf = "başka bir şey" gibi bir öğeye birden fazla CSS sınıfı uygulayabilirsiniz

Diğerlerinin söylediği gibi, bir öğeye birden çok sınıf ekleyebilirsiniz.

Ama asıl mesele bu değil. Kalıtım hakkında sorunuzu alıyorum. Asıl mesele CSS'deki miras yapılmasıdır değil sınıfları aracılığıyla, ancak eleman hiyerarşileri yoluyla. Bu nedenle, devralınan özellikleri modellemek için bunları DOM'daki farklı düzeylerde öğelere uygulamanız gerekir.

Ben de bunu deli gibi arıyordum ve sadece farklı şeyler deneyerek anladım: P ... Peki bunu şöyle yapabilirsiniz:

composite.something, composite.else
{
    blblalba
}

Aniden benim için çalıştı :)

Belirli durumlarda "yumuşak" bir miras yapabilirsiniz:

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

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

Bu yalnızca .composite sınıfını bir alt öğeye ekliyorsanız çalışır. .Composite içinde belirtilmeyen hiçbir değer açıkça miras alınmadığından "yumuşak" kalıtımdır. "Inherit" yerine "inline" ve "red" yazmanın daha az karakter olacağını unutmayın.

İşte özelliklerin listesi ve bunu otomatik olarak yapıp yapmadıkları: https://www.w3.org/TR/CSS21/propidx.html

Doğrudan miras mümkün olmasa da.

Bir üst etiket için bir sınıf (veya id) kullanmak ve daha sonra alt etiket davranışını heirarchy'sinden değiştirmek için CSS birleştiricileri kullanmak mümkündür.

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>

Örnek gibi çok sayıda açıklık kullanmanızı tavsiye etmem, ancak bu sadece bir kavram kanıtıdır. CSS'yi bu şekilde uygulamaya çalışırken ortaya çıkabilecek birçok hata var. (Örneğin, metin süsleme türlerini değiştirme).

Less ve Sass, CSS dilini değerli şekillerde genişleten CSS ön işlemcileridir. Sundukları pek çok iyileştirmeden sadece aradığınız seçenek. Less ile çok iyi cevaplar var ve Sass çözümünü ekleyeceğim.

Sass, bir sınıfın diğerine tam olarak genişletilmesini sağlayan genişletme seçeneğine sahiptir. Bu makalede okuyabileceğiniz uzatma hakkında daha fazla bilgi

Aslında istediğiniz şey var - ancak eklenti modülleri olarak yapılır. Örnekler için .NET'te Better CSS ile ilgili bu soruya göz atın .

Bu eklentilerin ne yaptığına dair bir fikir edinmek için Larsenal'ın LESS kullanımıyla ilgili cevabına göz atın .

CSS gerçekten değil yapmak ne istediğini. Kompozit fikri akılda tutarak kurallar yazmak istiyorsanız, pusulayı kontrol etmek isteyebilirsiniz . Daha önce bahsedilen Daha Az'a benzeyen bir stil sayfası çerçevesi.

Mixins ve tüm bu iyi iş yapmanızı sağlar.

Bahsedilen (mükemmel) yayınlardan memnun olmayanlar için, programlama becerilerinizi bir değişken (PHP veya hangisi) yapmak ve birden fazla sınıf adını depolamasını sağlamak için kullanabilirsiniz.

Bu benim karşılaşabileceğim en iyi kesmek.

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

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

Ardından, global değişkeni sınıf adlarından ziyade istediğiniz öğeye uygulayın

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

CSS oluştur'a bir göz atın : https://bambielli.com/til/2017-08-11-css-modules-composes/

onlara göre:

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

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

Reaksiyon projemde kullanıyorum.

Css sınıflarını nesne yönelimli sınıflar olarak düşünmeyin, bunları bir html öğesinin hangi nitelik sınıflarına göre biçimlendirildiğini belirtmek için diğer seçiciler arasında yalnızca bir araç olarak düşünün . Parantezler arasındaki her şeyi öznitelik sınıfı olarak düşünün ve sol taraftaki seçiciler , öznitelik sınıfından öznitelikleri miras almak için seçtikleri öğelere söyler . Misal:

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

Bir öğeye öznitelik verildiğinde, öğeyi class="foo"sınıftan miras alan nitelikler olarak .foodeğil, A sınıfı öznitelik ve B sınıfı öznitelik olarak düşünmek yararlıdır . Yani, kalıtım grafiği bir seviye derinliktedir, unsurlar nitelik sınıflarından türetilir ve seçiciler kenarların nereye gittiğini belirtir ve rakip nitelikler olduğunda (yöntem çözünürlük sırasına benzer) önceliği belirler.

Programlamanın pratik anlamı şudur. Yukarıda verilen stil sayfası var ki, ve yeni bir sınıf eklemek istediğiniz .bazaynı olmalıdır, font-sizeolarak .foo. Saf çözüm şu olurdu:

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

Ne zaman iki kere bir şeyler yazmak zorunda her zaman çok kızıyorum! Sadece iki kez yazmak zorunda mı, şimdi programlama belirten bir yolu yoktur .foove .bazaynı olmalıdır font-sizeve bir oluşturduk gizli bağımlılık! Yukarıdaki paradigmam, A sınıfıfont-size öznitelik özniteliğini özetlemem gerektiğini önerir :

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

Buradaki ana şikayet, şimdi seçmeleri gereken öğelerin de öznitelik taban sınıfı A'dan öznitelikleri miras alması gerektiğini belirtmek için A özniteliğinden her seçiciyi yeniden yazmam gerektiğidir . Yine de alternatifler, her şey değiştiğinde gizli bağımlılıkların olduğu her öznitelik sınıfını düzenlemeyi veya bir üçüncü taraf aracını kullanmayı hatırlamak zorundadır . İlk seçenek tanrıyı güldürüyor, ikincisi kendimi öldürmek istiyor.

LESS'ten daha güçlü bir metin ön işlemcisi istiyorsanız, PPWizard'a göz atın:

http://dennisbareis.com/ppwizard.htm

Web sitesini uyarmak gerçekten iğrenç ve küçük bir öğrenme eğrisi var, ancak makrolar aracılığıyla hem CSS hem de HTML kodu oluşturmak için mükemmel. Daha fazla web kodlayıcısının neden kullanmadığını hiç anlamadım.

Eğer php üzerinden .css dosyalarınızı önişlemek istediğinizi elde edebilirsiniz. ...

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

...