Bir CSS kuralına diğerinin içinde başvurmak mümkün müdür?

Örneğin, aşağıdaki HTML’ye sahipsem:

<div class="someDiv"></div>

ve bu CSS:

.opacity {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

.someDiv {
    background: #000; height: 50px; width: 200px;

/*** How can I reference the opacity and radius classes here
     so this div has those generic rules applied to it as well ***/

}

Komut dosyası dillerinde, genellikle komut dosyasının en üstünde yazılan genel işlevlere sahip olduğunuz gibi ve bu işlevi her kullanmanız gerektiğinde, tüm kodu her seferinde tekrarlamak yerine yalnızca işlevi çağırırsınız.

Hayır, bir kural kümesine diğerinden başvuramazsınız.

Bununla birlikte, bir stil sayfası içindeki birden çok kural kümesinde seçicileri yeniden kullanabilir ve tek bir kural kümesinde birden çok seçici kullanabilirsiniz ( bunları virgülle ayırarak ).

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

Tek bir HTML öğesine birden çok sınıf da uygulayabilirsiniz (class özelliği, boşlukla ayrılmış bir liste alır).

<div class="opacity radius">

Bu yaklaşımlardan herhangi biri sorununuzu çözmelidir.

Bir öğenin nasıl biçimlendirilmesi gerektiği yerine neden biçimlendirilmesi gerektiğini açıklayan sınıf adlarını kullanırsanız muhtemelen yardımcı olacaktır . Nasıl olduğunu stil sayfasında bırakın .

SASS gibi bir tür genişletilmiş CSS kullanmadığınız sürece yapamazsınız . Ancak bu iki ekstra sınıfı uygulamak çok mantıklı .someDiv.

Eğer .someDivtektir, ayrica bir kimliği vermek ve kimliği kullanarak css onu referans tercih ederim.

Biraz jquery kullanmaya istekli ve yetenekliysen, bunu kolayca yapabilirsin:

$('.someDiv').css([".radius", ".opacity"]);

Sayfayı halihazırda işleyen bir javascript'iniz varsa veya <script> etiketleri arasına bir yere koyabilirsiniz. Öyleyse, yukarıdakileri belge hazır işlevine sarın:

$(document).ready( function() {
  $('.someDiv').css([".radius", ".opacity"]);
}

Geçenlerde bir wordpress eklentisini güncellerken bununla karşılaştım. Css'de pek çok "! Önemli" direktif kullanan değiştirildi. Bazı etiketlerde önemli ilan etme dahice kararından dolayı stillerimi zorlamak için jquery kullanmak zorunda kaldım!

Bunu, @extend kullanarak SASS ön işlemcisi ile kolayca yapabilirsiniz .

someDiv {
    @extend .opacity;
    @extend .radius;
}

Ya da JavaScript (jQuery) kullanabilirsiniz:

$('someDiv').addClass('opacity radius')

Elbette en kolayı, doğrudan HTML'de birden çok sınıf eklemektir

<div class="opacity radius">

Sadece sınıfları html'nize ekleyin

<div class="someDiv radius opacity"></div>

Bu problemi dün yaşadım. @ Quentin cevabı tamam:

No, you cannot reference one rule-set from another.

ancak css'de kalıtımı simüle etmek için bir javascript işlevi yaptım (.Net gibi):

    var inherit_array;
    var inherit;
    inherit_array = [];
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.style != null) {
                inherit = cssRule_i.style.getPropertyValue("--inherits").trim();
            } else {
                inherit = "";
            }
            if (inherit != "") {
                inherit_array.push({ selector: cssRule_i.selectorText, inherit: inherit });
            }
        });
    });
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.selectorText != null) {
                inherit_array.forEach(function (inherit_i, index) {
                    if (cssRule_i.selectorText.split(", ").includesMember(inherit_i.inherit.split(", ")) == true) {
                        cssRule_i.selectorText = cssRule_i.selectorText + ", " + inherit_i.selector;
                    }
                });
            }
        });
    });

Array.prototype.includesMember = function (arr2) {
    var arr1;
    var includes;
    arr1 = this;
    includes = false;
    arr1.forEach(function (arr1_i, index) {
        if (arr2.includes(arr1_i) == true) {
            includes = true;
        }
    });
    return includes;
}

ve eşdeğer css:

.test {
    background-color: yellow;
}

.productBox, .imageBox {
    --inherits: .test;
    display: inline-block;
}

ve eşdeğer HTML:

<div class="imageBox"></div>

Kurallar farklı css dosyalarında olsa bile test ettim ve benim için çalıştım.

Güncelleme: Bu çözümde hiyerarşik kalıtımda bir hata buldum ve hatayı çok yakında çözüyorum.

Var () işlevini kullanabilirsiniz .

Var () CSS işlevi , başka bir özelliğin değerinin herhangi bir parçası yerine özel bir özelliğin değerini (bazen "CSS değişkeni" olarak adlandırılır) eklemek için kullanılabilir .

Misal:

:root {
  --main-bg-color: yellow;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: black;
  }
}

body {
  background-color: var(--main-bg-color);
}