Ist es möglich, eine CSS-Regel innerhalb einer anderen zu referenzieren?

Zum Beispiel, wenn ich folgendes HTML habe:

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

und dieses 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 ***/

}

So wie in Skriptsprachen generische Funktionen verwendet werden, die häufig oben im Skript geschrieben werden, und jedes Mal, wenn Sie diese Funktion verwenden müssen, rufen Sie einfach die Funktion auf, anstatt den gesamten Code jedes Mal zu wiederholen.

Nein, Sie können nicht auf einen Regelsatz aus einem anderen verweisen.

Sie können jedoch Selektoren für mehrere Regelsätze innerhalb eines Stylesheets wiederverwenden und mehrere Selektoren für einen einzelnen Regelsatz verwenden (indem Sie sie durch ein Komma trennen ).

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

Sie können auch mehrere Klassen auf ein einzelnes HTML-Element anwenden (das Klassenattribut verwendet eine durch Leerzeichen getrennte Liste).

<div class="opacity radius">

Jeder dieser Ansätze sollte Ihr Problem lösen.

Es wäre wahrscheinlich hilfreich, wenn Sie Klassennamen verwenden würden, die beschreiben, warum ein Element gestylt werden sollte, anstatt wie es gestylt werden sollte. Belassen Sie das Wie im Stylesheet.

Dies ist nur möglich, wenn Sie ein erweitertes CSS wie SASS verwenden . Es ist jedoch sehr vernünftig, diese beiden zusätzlichen Klassen anzuwenden .someDiv.

Wenn .someDives eindeutig ist, würde ich ihm auch eine ID geben und es in CSS mit der ID referenzieren.

Wenn Sie bereit und in der Lage sind, ein wenig jquery zu beschäftigen, können Sie dies einfach tun:

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

Wenn Sie ein Javascript haben, das die Seite bereits verarbeitet, oder Sie können es irgendwo in <script> -Tags einschließen. Wenn ja, wickeln Sie das Obige in die Dokumentbereitschaftsfunktion ein:

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

Ich bin kürzlich beim Aktualisieren eines WordPress-Plugins darauf gestoßen. Die sie wurden geändert, wobei viele "! Wichtige" Anweisungen in der gesamten CSS verwendet wurden. Ich musste jquery verwenden, um meine Stile zu erzwingen, weil ich mich genial entschieden hatte, auf mehreren Tags! Wichtig zu erklären.

Mit dem SASS-Vorprozessor können Sie dies ganz einfach mit @extend tun.

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

Andernfalls können Sie auch JavaScript (jQuery) verwenden:

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

Am einfachsten ist es natürlich, mehrere Klassen direkt im HTML-Code hinzuzufügen

<div class="opacity radius">

Fügen Sie einfach die Klassen zu Ihrem HTML hinzu

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

Ich hatte gestern dieses Problem. @ Quentins Antwort ist ok:

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

Aber ich habe eine Javascript-Funktion erstellt, um die Vererbung in CSS zu simulieren (wie .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;
}

und gleichwertiges CSS:

.test {
    background-color: yellow;
}

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

und gleichwertiges HTML:

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

Ich habe es getestet und für mich gearbeitet, auch wenn sich Regeln in verschiedenen CSS-Dateien befinden.

Update: Ich habe in dieser Lösung einen Fehler in der hierarchischen Vererbung gefunden und behebe den Fehler sehr bald.

Sie können die Funktion var () verwenden.

Die CSS-Funktion var () kann verwendet werden, um den Wert einer benutzerdefinierten Eigenschaft (manchmal als "CSS-Variable" bezeichnet) anstelle eines Teils eines Werts einer anderen Eigenschaft einzufügen .

Beispiel:

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

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

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