CSS选择没有特定子元素的元素

Question

例如我们有这个

<p></p>
<p></p>
<p><img src="" /></p>
<p></p>

我们如何选择所有p元素并将css样式应用到其中，除了那些带有img子元素的那些？

Answer 1

{c} :not()不支持选择，除了＆＃34;有元素＆＃34;但是你可以用jQuery做到这一点

＆＃13;

＆＃13;

$('p').not(":has(img)").css('background-color', 'yellow')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>aa</p>
<p>aa</p>
<p>img<img src="" /></p>
<p>aa</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

我们如何选择所有<p>元素并将CSS样式应用到其中，除了那些带有<img>子元素的元素？

CSS无法查看＆＃34; down＆＃34; （或＆＃34;未来＆＃34;）。

换句话说，你不能编写一个选择器，它取决于跟随你想要选择的元素。

有许多提议用于所谓的“父选择器＆＃34;或:contains - 类型CSS语法”，但这些提案远未得到批准，更不用说实现了。

您可以通过适当的Google / SO搜索找到针对个别情况的解决方法。例如，如果可以将img标记移出<p>并将其移到<p>前面，那么您可以使用兄弟组合器完成所需的操作，例如+和~。或者，如果绝对必要，您可以编写一些JavaScript代码。