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

时间:2017-07-31 03:02:18

标签: html css css3

例如我们有这个

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

  

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

CSS无法查看&#34; down&#34; (或&#34;未来&#34;)。

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

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

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