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

您可以使用: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>

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中的这一变化目前几乎没有浏览器支持。 Read more

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

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

2 个答案: