选择.class中的所有<p>除了</p> <footer> </footer>中的那些<p>

Question

除了.content-area下的p之外，我想选择<footer>中的所有p。我如何在CSS中执行此操作？顺便说一下，<footer>位于.content-area

内

无论如何，这是我想在.content-area

下的所有p上放置的CSS规则

.class p {padding-top: 20px; padding-bottom: 20px;}

编辑：根据下面的评论，源代码看起来像这样。

<div class="content-area">
    <img />
    <p></p>
    <p></p>
    <footer> 
        <p></p>
        <ul></ul>
    </footer>
</div>

任何人都可以帮助我吗？

Answer 1

您如果段落直接位于.class元素中，则应使用children selector作为.class > p来选择p元素。

.class > p  {
  background-color: gold;
}

<强> Demo

为了选择嵌套<p>元素而不是嵌套在footer中的元素，您可以使用:not()伪类，如下所示：

.class > p,
.class :not(footer) p {
  background-color: gold;
}

<强> Updated Demo

但是，您也可以将应用的样式覆盖到页脚内的段落。

Answer 2

您只需要在<footer>：

中重置段落的样式

.class p {padding-top: 20px; padding-bottom: 20px;}

.class footer p {padding-top: 0; padding-bottom: 0;}

---

根据您的修改，您可以使用直接子>选择器：

.content-area > p {
   padding-top: 20px; padding-bottom: 20px;
}

Answer 3

使用直接子选择器

.content-area > p {
   padding-top: 20px; padding-bottom: 20px;
}

这会将样式仅应用于.content-area

的直接子项