选择未包含在特定元素中的所有元素答案

【问题标题】：Select all elements that aren't wrapped in a specific element选择未包含在特定元素中的所有元素
【发布时间】：2016-12-12 11:40:32
【问题描述】：

我想选择<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）。那我该怎么做呢？

【问题讨论】：

对于较旧的浏览器，您可以使用 JavaScript。或者不要使用:not()，而是包容而不是排斥。

标签： javascript jquery html css css-selectors

【解决方案1】：

您可以使用:not() 排除跨度内的元素

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

【讨论】：

【解决方案2】：

一种现代 CSS 方法如下所示：

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

由于几个原因无法正常工作。然而，在今天的 CSS 中，:not 伪类主要只接受 简单选择器 作为参数。复杂或复合选择器都不起作用。这在 Selectors 4 中发生了变化，目前几乎没有浏览器支持。 Read more.

另外，:not-like CSS 定位在 IE8 中工作需要 JS/jQuery。以下是一些选项：Use :not() pseudo-class in IE7/IE8

【讨论】：