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

这是你的代码：

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

将所有元素设置为红色，footer除外。

问题是该规则将body元素设置为红色。然后footer继承颜色。

所以你的规则确实有效（兄弟姐妹被排除在外），但是页脚通过继承获得了颜色。

相反或定位所有兄弟（footer除外），定位所有孩子（footer除外）。这消除了继承漏洞：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要选择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>

Answer 3

你需要一个父元素嵌套:not()选择器才能工作，所以在你的代码body中，tag将作为父元素使用

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

CSS3：not（）选择器不在兄弟元素上工作

3 个答案: