2

以下の HTML の場合、.itemcontainer の子孫ではないすべての .name をどのように選択しますか。

.group .header .name:not(.itemcontainer から派生) のようなもの

jQueryを使用するか、他のクラスを追加することでこれを簡単に実行できることはわかっていますが、純粋なcssソリューションはありますか? 「子孫ではない」セレクターを見つけることができませんでした...

<div class='group'>

    <!-- Any number of ancestors of any type -->

    <div class='header'>

         <!-- Any number of ancestors of any type -->

        <div class='name'>

            SELECT ME!!!

        </div>

    </div>

    <div class='body'>

        <div class='itemcontainer'>

            <div class='item1'>

                <!-- Any number of ancestors of any type -->

                <div class='header'>

                        <!-- Any number of ancestors of any type -->

                    <div class='name'>

                            DON'T SELECT ME!!!

                    </div>

                </div>

                <div class='body'>

                    ...

                </div>

            </div>

                ...

        </div>

    </div>

        ...

</div>

ありがとう！

4

2 に答える 2

2

CSSセレクターでそのようなものを除外する方法を知りません。ただし、すべてのルールを定義してから、特定のルールを未定義にすることができます。

.group .header .name {
    background-color: green;
}
.group .itemcontainer .header .name {
    background-color: inherit;
}

編集：あなたが達成しようとしていることを考えると（コメントから私の答えまで）、純粋なCSSセレクターとしてではなく、実際にはjQueryを使用する方がはるかに理にかなっています：

$('.group .header .name').filter(':not(.itemcontainer *)')​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​.click(onClick);
于 2012-12-17T04:23:49.917 に答える
0

あなたがやろうとしていることはこれだと思います：

.name:not(.itemcontainer .name)

ただし:not()、セレクターは単純なセレクターしか受け入れないため、これは機能しません。言い換えれば、:not()セレクターでこれを達成できるとは思いません。申し訳ありません。

于 2012-12-17T04:47:35.827 に答える