CSS类可以继承一个或多个其他类吗？

Question

我长期以来一直是一名网络程序员并且不知道这个问题的答案我感到愚蠢,我实际上希望这是可能的,我只是不知道而不是我认为的答案(这是不可能的) .

我的问题是,是否有可能创建一个"继承"另一个CSS类(或多个)的CSS类.

例如,假设我们有:

.something { display:inline }
.else      { background:red }

我想做的是这样的事情:

.composite 
{
   .something;
   .else
}

其中".composite"类既显示内联又显示红色背景

Answer 1

有一些像LESS这样的工具,它允许你在更高的抽象层次上组合CSS,类似于你描述的.

少打电话给这些"Mixins"

代替

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

你可以说

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Answer 2

您可以将多个类添加到单个DOM元素,例如

<div class="firstClass secondClass thirdclass fourthclass"></div>

继承不是CSS标准的一部分.

Answer 3

是的,但不完全是那种语法.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Answer 4

将您的公共属性保持在一起并再次分配特定(或覆盖)属性.

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

Answer 5

元素可以包含多个类:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

而那就差不多了.我希望有一天能看到这个功能,以及类别名.

Answer 6

不,你做不了什么

.composite 
{
   .something;
   .else
}

这不是OO意义上的"类"名称..something而且.else只是选择者了.

但是您可以在元素上指定两个类

<div class="something else">...</div>

或者你可能会研究另一种形式的继承

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

段落backgroundcolor和颜色是从设置的封闭div中的设置继承而来的.foo.您可能必须检查确切的W3C规范.inherit绝对是大多数属性的默认值,但不适用于所有属性.

Answer 7

我遇到了同样的问题,并最终使用JQuery解决方案使它看起来像一个类可以继承其他类.

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

这将找到具有"复合"类的所有元素,并将元素"something"和"else"添加到元素中.所以类似的事情<div class="composite">...</div>会像这样结束:
<div class="composite something else">...</div>

Answer 8

给定示例的SCSS方式如下:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

更多信息,请查看sass基础知识

Answer 9

你能做的最好的就是这个

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

Answer 10

别忘了:

div.something.else {

    // will only style a div with both, not just one or the other

}

Answer 11

在Css文件中:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

Answer 12

完美时机:我从这个问题转到我的电子邮件,找到一篇关于Less的文章,这是一个Ruby库,其中包括:

既然 super 看起来很像 footer,但是使用不同的字体,我将使用Less的类包含技术(他们称之为mixin)来告诉它包含这些声明:

#super {
  #footer;
  font-family: cursive;
}

Answer 13

我意识到这个问题现在已经很老了但是,这里没什么了!

如果意图是添加一个隐含多个类属性的类,作为本机解决方案,我建议使用JavaScript/jQuery(jQuery实际上没有必要,但肯定有用)

如果你有,例如.umbrellaClass"继承" .baseClass1,.baseClass2你可以有一些准备就绪的JavaScript.

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

现在所有元素.umbrellaClass都具有两个.baseClasss的所有属性.请注意,与OOP继承一样,.umbrellaClass可能有也可能没有自己的属性.

这里唯一需要注意的是考虑是否有动态创建的元素在此代码触发时不存在,但也有简单的方法.

但是,糟糕的css没有本机继承.

Answer 14

不幸的是，CSS 并不像 C++、C# 或 Java 等编程语言那样提供“继承”。您不能声明一个 CSS 类，然后用另一个 CSS 类扩展它。

但是，您可以将多个类应用于标记中的标记......在这种情况下，有一组复杂的规则可以确定浏览器将应用哪些实际样式。

<span class="styleA styleB"> ... </span>

CSS 将根据您的标记查找可以应用的所有样式，并将这些多个规则中的 CSS 样式组合在一起。

通常，样式会被合并，但当发生冲突时，通常是后来声明的样式获胜（除非在其中一种样式上指定了 !important 属性，在这种情况下，后声明的样式获胜）。此外，直接应用于 HTML 元素的样式优先于 CSS 类样式。

Answer 15

您可以使用相反的方法来实现相同的结果 - 从复合开始，然后使用unset关键字删除样式。例如，如果您从以下示例组合开始：

.composite {
    color: red;
    margin-left: 50px;
    background-color: green
}

然后，您可以增加选择器的特异性以使用以下方法有选择地删除样式unset：

.composite.no-color {
    color: unset
}

.composite.no-margin-left {
    margin-left: unset
}

.composite.no-background-color {
    background-color: unset
}

这是一个演示这种方法的 JSFiddle。

这种方法的一个好处是，因为specificity复合选择器的 高于复合选择器本身，所以您不需要所有的类组合来实现多个组合的预期结果：

/* Multi-unset compound selector combinations, such as the one that follows, ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above. This keeps things simple. */
.composite.no-background-color.no-color.no-margin-left {
    background-color: unset;
    color: unset;
    margin-left: unset
}

此外，该关键字的支持率为96%unset，浏览器覆盖率非常好。

Answer 16

这在 CSS 中是不可能的。

CSS 中唯一支持的就是比其他规则更具体：

span { display:inline }
span.myclass { background: red }

具有类“myclass”的跨度将具有这两个属性。

另一种方法是指定两个类：

<div class="something else">...</div>

“else”的样式将覆盖（或添加）“something”的样式

Answer 17

不要将 css类视为面向对象的类，而应将它们视为其他选择器中的一个工具，用于指定html 元素的样式由哪些属性类决定。将大括号之间的所有内容视为属性类，左侧的选择器告诉它们选择的元素从属性类继承属性。例子：

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

当元素被赋予属性时class="foo"，最好不要将其视为从类继承属性.foo，而是从属性类 A和属性类 B 继承属性。即，继承图是一层深，元素从属性类派生，选择器指定边的去向，并在存在竞争属性时确定优先级（类似于方法解析顺序）。

对于编程的实际意义就是这样。假设您有上面给出的样式表，并且想要添加一个新的类，它.baz应该与. 天真的解决方案是这样的：font-size.foo

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

每当我必须输入两次内容时，我都会很生气！我不仅必须写两次，现在我无法以编程方式指示 和.foo应该.baz具有相同的font-size，而且我创建了一个隐藏的依赖项！ 我的上述范例建议我应该font-size从属性类 A中抽象出属性：

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

这里的主要抱怨是，现在我必须再次重新输入属性类 A中的每个选择器，以指定它们应该选择的元素也应该继承属性基类 A 的属性。不过，替代方案是必须记住每次发生更改时编辑每个存在隐藏依赖项的属性类，或者使用第三方工具。第一个选项让上帝发笑，第二个选项让我想自杀。