Có thể tham chiếu một quy tắc CSS trong một quy tắc CSS khác không?

Ví dụ: nếu tôi có HTML sau:

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

và CSS này:

.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 ***/

}

Giống như cách trong các ngôn ngữ kịch bản, bạn có các hàm chung thường được sử dụng thường được viết ở đầu tập lệnh và mỗi khi bạn cần sử dụng hàm đó, bạn chỉ cần gọi hàm thay vì lặp lại tất cả mã mỗi lần.

Không, bạn không thể tham chiếu bộ quy tắc này từ bộ quy tắc khác.

Tuy nhiên, bạn có thể sử dụng lại các bộ chọn trên nhiều bộ quy tắc trong một biểu định kiểu và sử dụng nhiều bộ chọn trên một bộ quy tắc duy nhất (bằng cách phân tách chúng bằng dấu phẩy ).

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

Bạn cũng có thể áp dụng nhiều lớp cho một phần tử HTML duy nhất (thuộc tính lớp có danh sách được phân tách bằng dấu cách).

<div class="opacity radius">

Một trong những cách tiếp cận đó sẽ giải quyết được vấn đề của bạn.

Nó có thể hữu ích nếu bạn sử dụng tên lớp mô tả lý do tại sao một phần tử nên được tạo kiểu thay vì cách tạo kiểu. Để lại cách thực hiện trong biểu định kiểu.

Bạn không thể trừ khi đang sử dụng một số loại CSS mở rộng như SASS . Tuy nhiên việc áp dụng hai lớp học thêm đó là rất hợp lý .someDiv.

Nếu .someDivlà duy nhất, tôi cũng sẽ chọn cấp cho nó một id và tham chiếu nó trong css bằng cách sử dụng id.

Nếu bạn sẵn sàng và có thể sử dụng một chút jquery, bạn có thể chỉ cần làm điều này:

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

Nếu bạn có một javascript đã xử lý trang hoặc bạn có thể đặt nó ở đâu đó trong thẻ <script>. Nếu vậy, hãy bọc phần trên trong hàm sẵn sàng tài liệu:

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

Gần đây tôi đã gặp điều này trong khi cập nhật một plugin wordpress. Chúng đã được thay đổi và sử dụng rất nhiều lệnh "! Important" trên css. Tôi đã phải sử dụng jquery để buộc các kiểu của mình vì quyết định thiên tài là khai báo! Important trên một số thẻ.

Bạn có thể dễ dàng làm như vậy với bộ xử lý trước SASS bằng cách sử dụng @extend.

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

Ngược lại, bạn cũng có thể sử dụng JavaScript (jQuery):

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

Tất nhiên, dễ nhất là thêm nhiều lớp ngay trong HTML

<div class="opacity radius">

Chỉ cần thêm các lớp vào html của bạn

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

Tôi đã có vấn đề này ngày hôm qua. Câu trả lời của @ Quentin là ok:

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

nhưng tôi đã tạo một hàm javascript để mô phỏng kế thừa trong css (như .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;
}

và css tương đương:

.test {
    background-color: yellow;
}

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

và HTML tương đương:

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

Tôi đã thử nghiệm nó và làm việc cho tôi, ngay cả khi các quy tắc nằm trong các tệp css khác nhau.

Cập nhật: Tôi đã tìm thấy một lỗi trong kế thừa phân cấp trong giải pháp này và sẽ sớm giải quyết được lỗi.

Bạn có thể sử dụng hàm var () .

Hàm var () CSS có thể được sử dụng để chèn giá trị của thuộc tính tùy chỉnh (đôi khi được gọi là "biến CSS") thay vì bất kỳ phần nào trong giá trị của thuộc tính khác.

Thí dụ:

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

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

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