2

これが私のHTMLだとしましょう：

<div class="example">
  <span></span>
</div>

<div class="test">
  <span></span>
</div>

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

<div class="blah">
  <span></span>
</div>

inspan以外のすべてをスタイリングしたい。ターゲットにしようとしている親要素よりも、実際のコードで無視したい s (親要素) が多すぎるため、使用できません。だから、これは私が現在やっていることです：span.foo:notdiv

.example span, .test span, .blah span {

ルールが 1 つだけの場合、これはある程度適切ですが、そうではありません。私のコードは次のようになります。

.example span, .test span, .blah span {
}

.example span:hover, .test span:hover, .blah span:hover {
}

.example span:before, .test span:before, .blah span:before,
.example span:after, .test span:after, .blah span:after {
}

これはすぐに退屈になります。これを行うより良い方法は何ですか？

4

2 に答える 2

2

CSSは面倒です。SASS または LESS を使用して CSS をコンパイルし、頭の痛い問題を解決してください。

SCSS (SASS) では:

.example,
.test,
.blah {
  span {
    &:hover {

    }
    &:before,
    &:after {

    }
  }
}

詳細については、http: //sass-lang.comおよびhttp://compass-style.orgをご覧ください。

于 2013-03-03T01:31:43.333 に答える
1

追加のクラスを div に追加し、それらを宣言で連鎖させることができます。したがって、div.blah のスパンに .bold クラスを追加したいふりをすると、次のようになります。これ .blah.bold span{} も、チェックしないと簡単に肥大化する可能性がありますが、あなたの状況ではぴったりのように思えます。

于 2013-03-03T01:36:19.497 に答える