13

CSSを使用して最初の子孫のみを選択する方法はありますか? たとえば、.container 要素から開始して <li class="example"> を青い境界線でスタイル設定し、その中の <p class="example"> をスタイル設定しない方法はありますか?

CSSでこれに代わる方法がたくさんあることを私は知っています。しかし、以下の正確なコードでそれを行う方法はありますか? つまり、セレクタ クラス .container と .example のみを使用し、クラス .container を以下の HTML 内の正確な場所に残し、以下の正確な HTML マークアップを使用します。

<style>
    .container .example{
        border: 1px solid blue;
    }
</style>

<div>
    <div class="container">
        <ul>
            <li class="example"><p class="example"></p></li>
            <li class="example"><p class="example"></p></li>
        </ul>
    </div>
</div>
4

5 に答える 5

20

「直接の子セレクター」のことですか？

.container > ul > li

..ここにあなたの青い境界線があります：

.container > ul > li {
    border: solid 1px #00f;
}

..クラスのみを使用するには、次のような方法でそれを実現できます。

.container > * > .example{
    border: solid 1px #00f;
}

「階層の最初」を選択します

css2 の方法 (そして、まだより堅牢だと思います) は、に境界線を追加して.exampleから削除することでした.example .example:

.example{
    border: solid 1px #00f;
}
.example .example{
    border: none;
}

CSS3 では、次のことができます。

:not(.example) > .example{
    border: solid 1px #00f;
}

これは青い境界線の取得も妨げないことに注意してください..しかし、別の直接の子がそのスタイルを取得しないことを保証します..example > div > .example.example.example

更新: .container から始める

どう.container :not(.example) > .exampleですか？

「クリーンな」css (つまり、単一のルール; リセットなどなし) を使用したほうがよいとは思いません。

セレクターの意味は、not()「セレクターに一致しないアイテムに一致する」ことであり、「このセレクターがルールのどこかに一致することを禁止する」ことではありません..

于 2012-10-16T20:27:20.763 に答える
6

最初の直接の子:

.container ul > :first-child{
    border: 1px solid blue;
}

http://codepen.io/sprynm/pen/PpKBRe

と ターゲットの<ul>間にノードがあるため、 は少し複雑になります。.container

于 2017-03-14T23:36:16.143 に答える
2

どうですか：

li.example:first-child {border: 1px solid blue;}
于 2012-10-16T21:35:00.930 に答える
0

その正確なマークアップを使用している場合、セレクターのクラスのみ.containerに制限されているのはなぜですか?.example

.container ul > li.exampleクラスの制限に適合しませんが、必要なものを選択します。

(>は子セレクターです)

すべての制限に適合する別の代替手段は次のとおりです。

.container .example {
  border: 1px solid blue;
}

.container .example .example {
 border: none; 
}

その制限は、明らかに最初の子孫だけを選択しないことです。最初の子孫以外のすべてのスタイルをオーバーライドするだけです。

于 2012-10-16T20:28:28.727 に答える