10

CSSを使用して、特定のセレクターに一致する要素の最も近い子孫を選択する方法はありますか？

<div class="foo"> <!-- if we're inside this -->
  <div>
    <br />
    <div class="bar"> <!-- match this -->
      <div class="bar"> <!-- but not this -->
        <div class="bar"> <!-- or this -->
        </div>
      </div>
    </div>
    <div class="bar"> <!-- I don't really care whether we match this -->
    </div>
  </div>
</div>

つまり、（間にある子要素または兄弟要素の数に関係なく）.bar任意の内の最初の要素を選択しますが、2番目または3番目の要素は選択しません。.foo.bar

4

3 に答える 3

17

これが私のハックタスティックな答えです：http://jsfiddle.net/thirtydot/gqJdP/2/

/*repeat for as many levels as there could be*/
.foo > .bar,
.foo > :not(.bar) > .bar,
.foo > :not(.bar) > :not(.bar) > .bar {
    border-color: blue;
}
.bar {
    border: 1px solid red;
    padding: 10px;
}

コメントからの引用：

私の提案は実行可能ですが、一致させたいと の間の可能な親の数に上限を設けることができれば、不快ではあります。セレクターを (たとえば) 10 回繰り返さなければならなかったとしても、それほど悪くはありません。.foo.bar

于 2012-06-08T19:08:20.167 に答える
2

いいえ、 CSSだけを使用してあなたが求めていることを完全に行う方法はありません。nth-childまたはを選択できますが、は選択できnth-of-typeませんthe-nth-item-matching-this-selector。

「証拠」として、利用可能なCSS3セレクターのリスト（CSS1およびCSS2.1のすべての機能をカバーしています）を確認してください：
http ：//www.w3.org/TR/selectors/

JavaScript（クライアント上）またはサーバー側の操作（たとえば、最初のそのようなアイテムに特別なクラスで注釈を付ける）を使用する必要があります。

編集：編集に基づいて、次のことができます。

.foo .bar      { font-weight:bold; color:red }
.foo .bar .bar { font-weight:normal; color:black }

つまり、継承される祖先に適用されたスタイルを明示的に「元に戻す」必要があります。これは「壊れやすい」です。祖先のスタイルを変更する場合は、対応する「オーバーライド」ルールの値も変更する必要がありますが、効果的です。

そして、@ thirtydotが彼のハックを答えとして投稿すれば、私たち全員もそれを受け入れることができます。

おそらく役に立たないかもしれませんが、XPathを使用してこの目標を達成できることにも注意してください。

于 2012-06-08T18:46:21.663 に答える
-4

これは の最初の子要素のみを取得する必要があり.fooます:

.foo > .bar

そして、チェーンのそれより下は選択しないでください。

于 2012-06-08T19:05:44.517 に答える