15 
.outerclass {
    h3 {
        color: blue;
    }
    p:not(.nested) {
        color: green;
    }
}

上記の LESS の例では、div クラス「outerclass」内のすべての「p」要素をターゲットにしたいのですが、「.nested」と呼ばれるさらにネストされた div 内の p 要素ではありません。これは機能しませんが、代わりにすべての p 要素を緑色にします。私が試してみました... 

p:not(.nested p) // excludes all p elements

そしてまた...

p:not(.nested > p) // excludes all p elements

...無駄に。これは可能ですか、それとも何が欠けていますか? 私はLESSの初心者です

4

1 に答える 1

34

css セレクター構文ほど LESS の問題ではありません。は、クラス自体p:not(.nested)のないすべてのp要素を言っています。あなたが述べているのは、クラスが存在する上にあるということです。したがって、これが必要です。.nested.nesteddivp

.outerclass {
    h3 {
        color: blue;
    }
    :not(.nested) p,
    > p {
        color: green;
    }
}

更新: を削除しdivて直接の子インスタンスを追加したため、CSS 出力は例外を除いてすべてをp適切にターゲットにします。p.outerclass

p要素の CSS 出力は次のようになります。

.outerclass :not(.nested) p,
.outerclass > p {
  color: green;
}

上記は、要素の子である要素を除く、直接の子p要素とネストされたp要素を対象とします。.outerclass.nested

問題

BoltClock が注目している問題は、要素pの直接の子よりも深くネストされている場合です。クラス内にあるにもかかわらず、最後の要素がまだターゲットにされているこのフィドルを参照してください。.nestedp.nested

p要素が常に直接の子である場合.nested、問題はありません。または、.nestedが常に の直接の子である.outerclassが、pより深くネストされている可能性がある場合は、上記のセレクターを に変更して、 の配下のすべてで機能> :not(.nested) pする CSS を生成.outerclass > :not(.nested) pできます。p.nested

問題は、.nestedin と.outerclasswithinpの.nested両方がそれらの親に対して任意の深さにある場合です。それを適切に処理できるCSSセレクターはありません。

于 2013-11-12T15:49:57.050 に答える