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

<div class="opacity radius">

Будь-який із цих підходів повинен вирішити вашу проблему.

Можливо, це допоможе, якби ви використовували імена класів, які описували, чому елемент слід стилізувати замість того, як його слід стилізувати. Залиште як у таблиці стилів.

Ви не можете, якщо не використовуєте якийсь розширений CSS, такий як SASS . Однак ці два додаткові класи доцільно застосовувати .someDiv.

Якщо .someDivвін унікальний, я також вирішив би надати йому ідентифікатор та посилатись на нього в css, використовуючи id.

Якщо ви бажаєте і можете використати трохи jquery, ви можете просто зробити це:

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

Якщо у вас є javascript, який вже обробляє сторінку, або ви можете її вкласти десь у тегах <script>. Якщо так, загорніть вищезазначене у функцію готовності документа:

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

Нещодавно я натрапив на це під час оновлення плагіна WordPress. Вони були змінені, що використовувало багато "! Важливих" директив через css. Мені довелося використовувати jquery, щоб змусити мої стилі через геніальне рішення оголосити важливим на декількох тегах.

Ви можете легко зробити це з попереднім процесором 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 () .

Функція var () CSS може використовуватися для вставки значення спеціального властивості (іноді його називають "змінною CSS") замість будь-якої частини значення іншої властивості.

Приклад:

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

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

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