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

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)。那么我该怎么办呢？

- Martin AJ

---

对于旧版浏览器，您可以使用JavaScript。或者不要使用:not()，而是包容性地代替排除性。 - StackSlave

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

- Kld

Answer 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中发生了变化，目前支持非常少的浏览器。阅读更多。

此外，要使类似于:not的CSS定位在IE8中起作用，需要JS / jQuery。以下是一些选项：在IE7 / IE8中使用:not（）伪类。

- Michael Benjamin