Apakah mungkin untuk mereferensikan satu aturan CSS di dalam aturan lainnya?

Misalnya jika saya memiliki HTML berikut:

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

dan CSS ini:

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

}

Seperti bagaimana dalam bahasa skrip Anda memiliki fungsi generik yang sering digunakan ditulis di bagian atas skrip dan setiap kali Anda perlu menggunakan fungsi itu, Anda cukup memanggil fungsi alih-alih mengulangi semua kode setiap saat.

Tidak, Anda tidak dapat mereferensikan satu kumpulan aturan dari yang lain.

Namun, Anda dapat menggunakan kembali pemilih pada beberapa set aturan dalam stylesheet dan menggunakan beberapa pemilih pada satu set aturan (dengan memisahkannya dengan koma ).

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

Anda juga dapat menerapkan beberapa kelas ke satu elemen HTML (atribut kelas membutuhkan daftar yang dipisahkan spasi).

<div class="opacity radius">

Salah satu dari pendekatan tersebut seharusnya menyelesaikan masalah Anda.

Mungkin akan membantu jika Anda menggunakan nama kelas yang menjelaskan mengapa sebuah elemen harus diberi gaya alih-alih bagaimana seharusnya gaya. Tinggalkan caranya di stylesheet.

Anda tidak bisa kecuali Anda menggunakan beberapa jenis CSS tambahan seperti SASS . Namun sangat masuk akal untuk menerapkan kedua kelas tambahan tersebut.someDiv .

Jika .someDivunik saya juga akan memilih untuk memberikan id dan mereferensikannya di css menggunakan id.

Jika Anda bersedia dan dapat menggunakan sedikit jquery, Anda dapat melakukan ini:

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

Jika Anda memiliki javascript yang sudah memproses halaman atau Anda dapat menyertakannya di suatu tempat dalam tag <script>. Jika demikian, bungkus di atas dalam fungsi siap dokumen:

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

Saya baru-baru ini menemukan ini saat memperbarui plugin wordpress. Mereka telah diubah yang menggunakan banyak arahan "! Penting" di seluruh css. Saya harus menggunakan jquery untuk memaksa gaya saya karena keputusan jenius untuk menyatakan! Penting pada beberapa tag.

Anda dapat dengan mudah melakukannya dengan pra-prosesor SASS dengan menggunakan @extend.

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

Sebaliknya, Anda juga bisa menggunakan JavaScript (jQuery):

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

Cara termudah tentu saja dengan menambahkan beberapa kelas langsung di HTML

<div class="opacity radius">

Cukup tambahkan kelas ke html Anda

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

Saya mengalami masalah ini kemarin. @ Jawaban Quentin tidak apa-apa:

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

tapi saya membuat fungsi javascript untuk mensimulasikan pewarisan di css (seperti .Net):

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

dan css yang setara:

.test {
    background-color: yellow;
}

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

dan HTML yang setara:

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

Saya mengujinya dan berhasil untuk saya, meskipun aturan ada di file css yang berbeda.

Pembaruan: Saya menemukan bug dalam warisan hierarki dalam solusi ini, dan saya segera menyelesaikan bug.

Anda dapat menggunakan fungsi var () .

Fungsi CSS var () dapat digunakan untuk memasukkan nilai properti khusus (terkadang disebut "variabel CSS") alih-alih bagian mana pun dari nilai properti lain.

Contoh:

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

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

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