是否可以引用另一个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规则？

回答

相关问题