Question

Paragraph标记的CSS代码必须影响我网页中的所有p标记，但页脚中的p标记除外。我该怎么办？我试过这个

.mypage section :not(footer) p{color:red}

<body class="mypage">
<section>
<p>Hello world</p>
</section>
<footer>
<p>footer content</p>
</footer>
</body>

实际上我的CSS代码不应该影响页脚内的p标签。请帮帮我。

Answer 1

Footer不在section元素中，因此您的选择器无法正常工作。

＆＃13;

.mypage :not(footer) p{
   color:red
}

＆＃13;

<body class="mypage">
<section>
<p>Hello world</p>
</section>
<footer>
<p>footer content</p>
</footer>
</body>

＆＃13;

Answer 2

另一个简单的解决方案就是这样做。即使您要添加更多内容和更多元素，它也将始终有效：

＆＃13;

p {
  color: red
}
footer p {
  color:initial;
}

＆＃13;

<body class="mypage">
  <section>
    <p>Hello world</p>
  </section>
  <footer>
    <p>footer content</p>
  </footer>
</body>

＆＃13;

Answer 3

为什么不再次定位页脚？

.mypage section p{color: red}
.mypage footer p{color: blue}

<body class="mypage">
    <section>
        <p>Hello world</p>
    </section>
    <footer>
        <p>footer content</p>
    </footer>
</body>

使用not（）排除部分

3 个答案: