È possibile fare riferimento a una regola CSS all'interno di un'altra?

Ad esempio, se ho il seguente codice HTML:

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

e questo 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 ***/

}

Come come nei linguaggi di scripting si hanno funzioni generiche che vengono usate spesso scritte all'inizio dello script e ogni volta che è necessario utilizzare quella funzione si chiama semplicemente la funzione invece di ripetere tutto il codice ogni volta.

No, non puoi fare riferimento a un insieme di regole da un altro.

Tuttavia, puoi riutilizzare i selettori su più set di regole all'interno di un foglio di stile e utilizzare più selettori su un singolo set di regole ( separandoli con una virgola ).

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

Puoi anche applicare più classi a un singolo elemento HTML (l'attributo class accetta un elenco separato da spazi).

<div class="opacity radius">

Entrambi questi approcci dovrebbero risolvere il tuo problema.

Probabilmente sarebbe utile se usassi nomi di classi che descrivono perché un elemento dovrebbe essere stilizzato invece di come dovrebbe essere disegnato. Lascia il come nel foglio di stile.

Non puoi a meno che tu non stia usando un qualche tipo di CSS esteso come SASS . Tuttavia è molto ragionevole applicare queste due classi extra a .someDiv.

Se .someDivè unico, sceglierei anche di dargli un id e di referenziarlo in CSS usando l'id.

Se sei disposto e in grado di impiegare un po 'di jquery, puoi semplicemente fare questo:

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

Se hai un javascript che elabora già la pagina o puoi racchiuderlo da qualche parte nei tag <script>. In tal caso, racchiudi quanto sopra nella funzione documento pronto:

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

Recentemente mi sono imbattuto in questo durante l'aggiornamento di un plugin wordpress. Il loro è stato cambiato che utilizzava molte direttive "! Important" attraverso il css. Ho dovuto usare jquery per forzare i miei stili a causa della geniale decisione di dichiarare! Importante su diversi tag.

Puoi farlo facilmente con il pre-processore SASS usando @extend.

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

Altrimenti, potresti usare anche JavaScript (jQuery):

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

Il modo più semplice è ovviamente aggiungere più classi direttamente nell'HTML

<div class="opacity radius">

Basta aggiungere le classi al tuo html

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

Ho avuto questo problema ieri. La risposta di @ Quentin è ok:

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

ma ho creato una funzione javascript per simulare l'ereditarietà in css (come .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;
}

e css equivalente:

.test {
    background-color: yellow;
}

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

e HTML equivalente:

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

L'ho testato e ha funzionato per me, anche se le regole sono in file CSS diversi.

Aggiornamento: ho trovato un bug nell'ereditarietà gerarchica in questa soluzione e sto risolvendo il bug molto presto.

Puoi usare la funzione var () .

La funzione CSS var () può essere utilizzata per inserire il valore di una proprietà personalizzata (a volte chiamata "variabile CSS") invece di qualsiasi parte di un valore di un'altra proprietà.

Esempio:

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

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

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