เป็นไปได้หรือไม่ที่จะอ้างอิงกฎ 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ไม่ซ้ำกันฉันจะเลือกที่จะให้ id และอ้างอิงใน css โดยใช้ id

หากคุณเต็มใจและสามารถใช้ jquery เพียงเล็กน้อยคุณสามารถทำได้:

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

หากคุณมีจาวาสคริปต์ที่ประมวลผลเพจอยู่แล้วหรือคุณสามารถใส่ไว้ในแท็ก <script> ในกรณีนี้ให้รวมด้านบนไว้ในฟังก์ชัน document ready:

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

ฉันเพิ่งเจอสิ่งนี้ในขณะที่อัปเดตปลั๊กอิน wordpress มีการเปลี่ยนแปลงซึ่งใช้คำสั่ง "! important" เป็นจำนวนมากใน css ฉันต้องใช้ jquery เพื่อบังคับสไตล์ของฉันเพราะการตัดสินใจของอัจฉริยะในการประกาศ! สำคัญในหลายแท็ก

คุณสามารถทำได้อย่างง่ายดายด้วยSASS pre-processorโดยใช้ @extend

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

คุณสามารถใช้ JavaScript (jQuery) ได้เช่นกัน:

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

วิธีที่ง่ายที่สุดคือการเพิ่มหลายชั้นเรียนใน HTML

<div class="opacity radius">

เพียงเพิ่มคลาสใน html ของคุณ

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

ฉันมีปัญหานี้เมื่อวานนี้ @ คำตอบของ 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;
                    }
                });
            }
        });
    });

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