Можно ли ссылаться на одно правило 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 ***/

}

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

Ответ 1

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

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

.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 (атрибут класса занимает список, разделенный пробелами).

<div class="opacity radius">

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

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

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

Конечно, проще всего добавить несколько классов прямо в HTML

<div class="opacity radius">

Ответ 5

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

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

Ответ 6

У меня была эта проблема вчера. @Quentin ответ в порядке:

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