Wählen Sie alle Elemente aus, die nicht in ein bestimmtes Element eingeschlossen sind.

Question

Ich möchte <p> markieren und einige Eigenschaften festlegen, außer wenn es in <span>-Tags eingeschlossen ist.

Wie kann ich das tun?

<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>

Vielleicht so etwas wie folgt aus:

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

Aber die meisten alten Browsern verwenden Benutzer meiner Website wie IE8 (wie Sie wissen, dass es nicht CSS3 unterstützt) . Wie kann ich das tun?

Answer 1

Sie können :not() verwenden Sie die Elemente innerhalb einer Spanne auszuschließen

$('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

Eine moderne CSS-Methode würde wie folgt aussehen:

: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>

Ihre vorgeschlagene Lösung ...

p:not(span p) 

würde für ein paar Gründe, nicht funktionieren. In erster Linie akzeptiert jedoch die :not Pseudo-Klasse, in der heutigen CSS, nur einfache Selektoren als Argument. Weder komplexe noch komplexe Selektoren würden funktionieren. Dies ändert sich in Selectors 4, die derzeit sehr wenig Browserunterstützung haben. Read more.

Auch für :not-wie CSS-Targeting in IE8 arbeiten würde JS/jQuery erfordern. Hier sind einige Optionen: Use :not() pseudo-class in IE7/IE8