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

是否可以创建一个从另一个CSS类（或多个）“继承”的CSS类。

例如，假设我们有：

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

我想做的是：

.composite 
{
   .something;
   .else
}

其中“.composite”类将显示为内联，并具有红色背景

当前回答

是的，但不完全符合这个语法。

.composite,
.something { display:inline }

.composite,
.else      { background:red }

其他回答

在Css文件中：

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

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

一个元素可以包含多个类：

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

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

不幸的是，这几乎和你会得到的一样接近。我希望有一天能看到这个特性以及类别名。

在特定情况下，可以执行“软”继承：

.composite
{
display:inherit;
background:inherit;
}

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

这仅在将.composite类添加到子元素时有效。它是“软”继承，因为任何未在.composite中指定的值都不会明显继承。请记住，简单地写“inline”和“red”而不是“inherit”仍然会减少字符数。

以下是财产列表，以及它们是否自动执行此操作：https://www.w3.org/TR/CSS21/propidx.html

这在CSS中是不可能的。

CSS中唯一支持的是比另一条规则更具体：

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

类为“myclass”的span将同时具有这两个财产。

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

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

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

不，你不能这样做

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

其中段落背景颜色和颜色继承自封闭div中的设置，该div为.foo样式。您可能需要检查确切的W3C规范。无论如何，inherit是大多数财产的默认值，但不是所有属性的默认值。

推荐文章