html - CSS3 :not() selector not working on sibling element

Question

我有一个简单的布局，如果它不在 footer 元素中，我希望文本为红色。它适用于 p 标签、a 标签等。

但是当我尝试使用 footer 标签时，它不起作用。

我的代码如下:

p {
  color: #000000;
}

 :not(footer) {
  color: #ff0000;
}

<h1>This is a heading</h1>

<footer>This is a footer.</footer>

<div>This is some text in a div element.</div>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

Answer 1

您需要选择 body 的父级(否则 footer 将根据您规定的规则从 body 继承红色)，以便为 :not(footer) 工作。

关于 p 它是 CSS specificity 的问题

p {
    color: #000;
}

body > *:not(footer) { /* note that having :not(footer) is the same as *:not(footer), the wildcard is not necessary */
    color: #f00;
}

<h1>This is a heading</h1>

<footer>This is a footer.</footer>

<div>This is some text in a div element.</div>

<p>This is some text in a p element.</p>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>