是否可以引用另一個CSS規則？

例如，如果我有以下的HTML：是否可以引用另一個CSS規則？

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

}

怎麼樣的腳本語言，你有使用常寫在腳本的頂部通用功能和每次需要使用該功能時，只需調用該函數，而不是每次重複所有代碼。

來源

2010-10-30 Jake

多個類是沒可能來更改HTML？ – BoltClock 2010-10-30 19:55:35

您可以在'.radius'中添加逗號分隔的類列表，如'.radius，.another，.element {/ * css * /}'。這將爲您節省額外的代碼，但可能會降低可讀性。 – Lekensteyn 2010-10-30 19:56:38

[CSS類是否可以繼承一個或多個其他類？]（https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes） – 2017-09-21 21:46:14

不，你不能引用另一個規則集。

但是，您可以在樣式表和內的多個規則集上重複使用多個選擇器（在separating them with a comma之前）使用多個選擇器。

.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">

其中任何一種方法都可以解決您的問題。

，如果你使用的描述爲什麼元素應改用風格的應該如何設置樣式的類名稱它可能會有所幫助。在樣式表中留下如何。

來源

2010-10-30 19:56:06 Quentin

我不反對，但我需要評論，它不會讓我複製規則，例如'fieldset legend' to'label.legend'。我理解但很遺憾。 – rishta 2017-02-03 16:52:52

@ rishta - 錯......我在這個答案的第一段中說過。 – Quentin 2017-02-04 00:50:21

你也可以這樣聲明一個具有兩個類的元素的規則集：'.someDiv.other {/ * style ... * /}'這樣，只有兩個類的元素都受到影響 – Sirmyself 2018-02-02 21:25:30

只是

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

來源

2010-10-30 19:57:20 MrMisterMan

你不能，除非你正在使用某種形式的擴展CSS的類添加到您的HTML如SASS。但是，將這兩個額外類應用於.someDiv是非常合理的。

如果.someDiv是唯一的，我也會選擇給它一個id並在css中使用id引用它。

來源

2010-10-30 19:57:31 adamse

如果你願意並且能夠使用一個小的jQuery，你可以簡單地這樣做：

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

如果您有已經處理的頁面，也可以在<腳本>某處將其包含在JavaScript的標籤。如果是這樣，在文檔就緒功能包裝上述：

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

我最近遇到這個，而更新wordpress插件。他們已經改變了，在CSS中使用了很多「！重要」指令。我不得不使用jquery來強制我的樣式，因爲天才決定在幾個標籤上聲明！important。

來源

2014-10-24 20:46:19 eggmatters

通過使用@extend，您可以輕鬆地使用SASS pre-processor。

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

Ohterwise，你可以使用JavaScript（jQuery的），以及：

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

最簡單的當然是添加就在HTML

<div class="opacity radius">

來源

2018-02-02 21:16:04

是否可以引用另一個CSS規則？

回答

相關問題