有没有办法只为孩子而不是孙子申请css？

Question

我想为div元素内的p元素提供30px的填充。但是我不希望将该填充应用于p内的img标签。

<div class="desc">
  <p>first paragraph</p>
  <p><img src="....."></p>
  <p>second paragraph</p>
</div>

我在下面附上了要求的结果。

Answer 1

您可以使用>选择器。

div > p { padding: 30px; }

仅将样式应用于直接子元素（=直接后代）

Answer 2

正如#Khaaytil所述，您可以在选择器之间使用>。 在此处查看更多参考信息> direct descendant selector

对于不同的情况，您还可以看到以下2种情况：

使用+ adjacent sibling selector

使用~ non-adjacent sibling selector

您也可以尝试:only-child Selector

但是作为最佳实践，您实际上不应将图像包装在

标记中。只需将图片放在2个标签之间，或将其包装在另一个标签中即可。