2

次のfooクラスがあるとします

HTML：

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

CSS：

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

次に、fooのスタイルを使用するクラスバー付きのdivを追加します。

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

ただし、これにはHTMLの変更が含まれます。HTMLを変更せずに別のクラスのスタイルを継承する方法はありますか？

何かのようなもの：

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

.bar{
  inherit: .foo;
 }
4

4 に答える 4

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 に答える
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 に答える
0

残念ながら、CSSプロパティの継承を許可するセレクターはありません。HTMLコードを直接変更したくない場合は、次のような小さなJavaScriptコマンドを追加できます。 

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

（これにより、すべてのfooクラスdivがクラスdivfoo barに変更されます。特定のdivを変更する場合は、次のコマンドを使用します。document.getElementsByClassName("foo")[n].setAttribute("class","foo bar");、ここで、はクラスdivnのインデックスです。）foo

そうでなければ、JavaScriptを使用せずに、残念ながらCSSクラスを「継承」する方法はありません。

于 2013-01-04T07:04:49.600 に答える
0

cssには継承オプションはありません。.fooクラスの後に.barクラスをコンマ（、）で区切って追加できます

.bar, .foo{
  ..some styles here...
}
于 2013-01-04T06:57:35.643 に答える