协慌网

登录 贡献 社区

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

我因为从事网络程序员这么长时间而又不知道这个问题的答案而感到愚蠢,我实际上希望这是可能的,我只是不知道而不是我认为答案是什么(那是不可能的) 。

我的问题是,是否有可能使一个 CSS 类从另一个 CSS 类(或多个 CSS 类)“继承”。

例如,假设我们有:

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

我想做的是这样的:

.composite 
{
   .something;
   .else
}

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

答案

有像 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;
}

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

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

稍后的类(或更具体的类)中给出的规则将被覆盖。因此,在该示例中, fourthclass

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

是的,但不完全符合该语法。

.composite,
.something { display:inline }

.composite,
.else      { background:red }