Czy można odwołać się do jednej reguły CSS w innej?

Na przykład, jeśli mam następujący kod HTML:

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

i ten 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 ***/

}

Podobnie jak w językach skryptowych, masz funkcje ogólne, które są często używane w górnej części skryptu i za każdym razem, gdy potrzebujesz tej funkcji, po prostu wywołujesz funkcję, zamiast za każdym razem powtarzać cały kod.

Nie, nie możesz odwoływać się do jednego zestawu reguł z innego.

Możesz jednak ponownie użyć selektorów w wielu zestawach reguł w arkuszu stylów i użyć wielu selektorów w jednym zestawie reguł ( oddzielając je przecinkami ).

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

Możesz także zastosować wiele klas do pojedynczego elementu HTML (atrybut klasy zajmuje listę oddzieloną spacjami).

<div class="opacity radius">

Każde z tych podejść powinno rozwiązać twój problem.

Prawdopodobnie pomogłoby, gdybyś użył nazw klas, które opisują, dlaczego element powinien być stylizowany, zamiast tego, jak powinien być stylizowany. Zostaw jak w arkuszu stylów.

Nie możesz, chyba że używasz jakiegoś rozszerzonego CSS, takiego jak SASS . Jednak zastosowanie tych dwóch dodatkowych klas do .someDiv.

Jeśli .someDivjest unikalny, chciałbym również nadać mu identyfikator i odwoływać się do niego w css za pomocą identyfikatora.

Jeśli chcesz i możesz zastosować trochę jquery, możesz po prostu zrobić to:

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

Jeśli masz skrypt javascript, który już przetwarza stronę, lub możesz umieścić go gdzieś w tagach <script>. Jeśli tak, zawiń powyższe w funkcję gotowości dokumentu:

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

Niedawno natknąłem się na to podczas aktualizacji wtyczki wordpress. Zmieniono je, które wykorzystywały wiele "! Ważnych" dyrektyw w całym css. Musiałem użyć jquery, aby wymusić moje style z powodu genialnej decyzji, aby oznaczyć! Ważny na kilku tagach.

Możesz to łatwo zrobić za pomocą preprocesora SASS, używając @extend.

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

Oczywiście, możesz również użyć JavaScript (jQuery):

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

Najłatwiej jest oczywiście dodać wiele klas bezpośrednio w kodzie HTML

<div class="opacity radius">

Po prostu dodaj klasy do swojego html

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

Miałem wczoraj ten problem. @ Quentin odpowiada:

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

ale zrobiłem funkcję javascript do symulacji dziedziczenia w css (jak .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;
}

i odpowiednik css:

.test {
    background-color: yellow;
}

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

i odpowiednik HTML:

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

Przetestowałem to i działało dla mnie, nawet jeśli reguły są w różnych plikach css.

Aktualizacja: znalazłem błąd w dziedziczeniu hierarchicznym w tym rozwiązaniu i wkrótce go naprawię.

Możesz użyć funkcji var () .

Funkcja var () CSS może służyć do wstawiania wartości właściwości niestandardowej (czasami nazywanej „zmienną CSS”) zamiast dowolnej części wartości innej właściwości.

Przykład:

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

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

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