14

CSSクラスaa、bb、およびccを含むこのHTMLについて考えてみます。

<div class='aa'>
<div class='bb'>
<div class='cc'>
</div>
</div>
</div>

class=cc次のようにタグを選択できます.aa > .bb > .cc。ただし、私の場合、.bbタグがない場合があります。つまり、HTMLは次のようになります。

<div class='aa'>
<div class='cc'>
</div>
</div>

.ccしたがって、に近いものをすべて選択するには.aa、2つのCSSパスを指定する必要があります。

.aa > .bb > .cc,
.aa > .cc { .... }

これは機能しますが、もっと短い方法はありませんか？これに似たもの：

.aa > (.bb >)? .cc { ... }   /* ? means "optional" */

CSSまたはStylusやL​​ESSのようなもので？

動機：現実の世界では、「aa」と「bb」と「cc」はやや長い名前であり、「aa」と「cc」の前後にはもっと多くのものがあり、複製する必要がないのはいいことですそのもの。

注意：私の場合、これは機能しません。ページの他の場所で.aa .cc一致するものが多すぎるためです。.ccは.cc、のすぐ下.aa、またはのいずれかである必要があります.aa > .bb。

4

4 に答える 4

14

スタイラスとSassの場合、これを行うことができます（Sassのライブ例）：

.aa
  > .bb, &
    > .cc
      width: 10px

Sassのワンライナーでそうする方法を見つけることができませんでしたが、Less / Stylus / Scssの場合はこれも行うことができます（Scssのライブ例、 Lessの場合）：

.aa { > .bb, & { > .cc {
  width: 10px
}}}

これもそれほどきれいではありませんが、それでも何もないよりはましです:)

于 2012-11-27T15:03:06.327 に答える
1

動作しません.aa > .cc, .aa > .bb > .cc {}か？それとも私はあなたの質問を誤解しましたか？
これにより.cc、直接.aaの子である.ccものと、.bb子（の子.aa）であるもののみが選択されます。

于 2012-11-23T06:11:01.893 に答える
1

オプションを使用したい場合は、非常に興味深いですが、最も正しいフォームを使用できます。

>.aa (>.bb)? >.cc { ... }

しかし、正しいフォームは次のようになります。

.aa .cc { ... }

スタイラスに:

.aa   
  .cc

それで全部です。

于 2013-06-27T15:55:39.580 に答える