特定の要素にラップされていないすべての要素を選択します

Question

<p>タグを選択し、<span>タグにラップされている場合を除いていくつかのプロパティを設定します。

どうすればいいですか？たぶん

<div> 
 
     <p></p> 
 
</div> 
 
<div> 
 
    <span> 
 
     <p></p>   // except this one - because it's warped into span tag 
 
    <span> 
 
</div> 
 
<div> 
 
    <div> 
 
     <p></p> 
 
    </div> 
 
</div> 
 
<ul> 
 
    <li> 
 
     <p></p> 
 
    </li> 
 
</ul>

このような何か：

p:not(span p) { 
    // CSS properties here 
} 

しかし、IE8 のように私のウェブサイトのユーザーの使用の最も古いブラウザ（あなたが知っているように、それはCSS3をサポートしていません） 。だから私はどうすればいいのですか？

Answer 1

あなたは近代的なCSSの方法は次のようになり

$('p:not(span p)').each(function(){ 
 
console.log($(this).text()) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p>p1</p> 
 
</div> 
 
<div> 
 
    <span> 
 
     <p>p2</p>   // except this one - because it's warped into <span> tag 
 
    <span> 
 
</div> 
 
<div> 
 
    <div> 
 
     <p>p3</p> 
 
    </div> 
 
</div> 
 
<ul> 
 
    <li> 
 
     <p>p4</p> 
 
    </li> 
 
</ul>

Answer 2

一つのスパン内の要素を除外するために:not()を使用することができます。

:not(span) > p { background-color: aqua; } /* select all p elements who's parent 
 
               is not a span */

<div> 
 
    <p>YES</p> 
 
</div> 
 
<div> 
 
    <span> 
 
     <p>NO, because it's wrapped into <code>span</code> tag</p> 
 
    </span> 
 
</div> 
 
<div> 
 
    <div> 
 
     <p>YES</p> 
 
    </div> 
 
</div> 
 
<ul> 
 
    <li> 
 
     <p>YES</p> 
 
    </li> 
 
</ul>

を

あなたの提案されたソリューション...

p:not(span p) 

は理由のカップルのために動作しないでしょう。しかし主に、:not疑似クラスは、今日のCSSでは、単純なセレクタを引数として受け入れます。複雑なセレクタも複合セレクタも機能しません。現在のところ、ブラウザのサポートがほとんどないセレクタ4ではこの変更が行われます。 Read more。

また、-の場合、IE8で動作するCSSターゲティングにはJS/jQueryが必要です。いくつかのオプションがあります：Use :not() pseudo-class in IE7/IE8