Можно ли ссылаться на одно правило CSS внутри другого?

Например, если у меня есть следующий HTML-код:

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

и этот 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 ***/

}

Подобно тому, как в языках сценариев у вас есть общие функции, которые часто используются, написанные в верхней части сценария, и каждый раз, когда вам нужно использовать эту функцию, вы просто вызываете функцию вместо того, чтобы каждый раз повторять весь код.

Нет, вы не можете ссылаться на один набор правил из другого.

Однако вы можете повторно использовать селекторы для нескольких наборов правил в таблице стилей и использовать несколько селекторов в одном наборе правил ( разделяя их запятыми ).

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

Вы также можете применить несколько классов к одному элементу HTML (атрибут class принимает список, разделенный пробелами).

<div class="opacity radius">

Любой из этих подходов должен решить вашу проблему.

Вероятно, было бы полезно, если бы вы использовали имена классов, описывающие, почему элемент должен быть стилизован, а не как он должен быть стилизован. Оставьте как в таблице стилей.

Вы не можете этого сделать, если не используете какой-либо расширенный CSS, такой как SASS . Однако очень разумно применить эти два дополнительных класса к .someDiv.

Если .someDivон уникален, я бы также дал ему идентификатор и ссылку на него в css с помощью идентификатора.

Если вы хотите и можете использовать небольшой jquery, вы можете просто сделать это:

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

Если у вас есть javascript, который уже обрабатывает страницу, или вы можете заключить его где-нибудь в теги <script>. Если да, оберните приведенное выше в функцию готовности документа:

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

Я недавно столкнулся с этим при обновлении плагина wordpress. Они были изменены, и в CSS использовалось множество директив "! Important". Мне пришлось использовать jquery, чтобы заставить мои стили, из-за гениального решения объявить! Important в нескольких тегах.

Вы можете легко сделать это с помощью препроцессора SASS , используя @extend.

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

В противном случае вы также можете использовать JavaScript (jQuery):

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

Самый простой, конечно, добавить несколько классов прямо в HTML.

<div class="opacity radius">

Просто добавьте классы в свой html

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

У меня вчера была эта проблема. @ Квентин ответил нормально:

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

но я сделал функцию javascript для имитации наследования в css (например, .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;
}

и эквивалентный css:

.test {
    background-color: yellow;
}

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

и эквивалентный HTML:

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

Я тестировал и работал у меня, даже если правила находятся в разных файлах css.

Обновление: я обнаружил ошибку в иерархическом наследовании в этом решении и очень скоро устраню ее.

Вы можете использовать функцию var () .

CSS-функцию var () можно использовать для вставки значения настраиваемого свойства (иногда называемого «переменная CSS») вместо любой части значения другого свойства.

Пример:

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

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

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