2

假设我有以下 foo 类

HTML:

<div class="foo">..</div>

CSS:

.foo{
  ..some styles here...
}

现在我想添加一个带有类 bar 的 div,它使用 foo 的样式:

<div class="bar foo">..</div>

但这涉及更改 HTML。有没有办法在不更改 HTML 的情况下继承另一个类的样式?

就像是:

<div class="bar">..</div>

.bar{
  inherit: .foo;
 }
4

4 回答 4

1

你可以这样做:

.foo, .bar
{
    /* rules that two classes have in common */
}

.foo
{
    /* rules that apply to the foo class only */
}

.bar
{
    /* rules that apply to the bar class only */
}
于 2013-01-04T06:54:52.700 回答
1

通过应用 LESS,您可以混合如下声明:

/* LESS */
.foo {
  /* some style here */
}

.bar {
  .foo;
}

请注意,如果您想.foo从 CSS 输出中隐藏规则集(可能是仅用于继承的规则集),您可以稍微修改上面的代码:

/* LESS */
.foo() { /* It's called "parametric mixin" */
  /* some style here */
}

.bar {
  .foo;
}

通过使用 LESS(或 SASS/Stylus,如果您愿意),您可以在 HTML 代码中解耦样式和类名,同时保持样式规则集可重用:

<!-- no need to use style-related class name here -->
<h2 class="post-title">...</h2>
/* LESS */
/* reusable style ruleset */
.bold-title() {
  font-weight: bold;
  font-family: Impact, sans-serif;
}

/* actually use those rulesets */
.post-title {
  .bold-title;
}

编译后你会得到如下整洁的 CSS 代码:

/* CSS */
.post-title {
  font-weight: bold;
  font-family: Impact, sans-serif;
}
于 2013-01-04T08:23:44.170 回答
0

css 中没有继承选项。你可以在 .foo 类之后添加你的 .bar 类,用逗号(,)分隔

.bar, .foo{
  ..some styles here...
}
于 2013-01-04T06:57:35.643 回答
0

不幸的是,没有允许继承 CSS 属性的选择器。如果您不想直接更改 HTML 代码,可以添加一个小的 JavaScript 命令,如下所示:

var x = document.getElementsByClassName("foo");
for (i=0;i<x.length;i++){x[i].setAttribute("class","foo bar");}

(这会将所有foo类 div 更改为foo bar类 div。如果要更改特定 div,请使用此命令:document.getElementsByClassName("foo")[n].setAttribute("class","foo bar");,其中nfoo类 div 的索引。)

否则,不幸的是,如果不使用 JavaScript,就无法“继承” CSS 类。

于 2013-01-04T07:04:49.600 回答