为什么:not(p)选择段落？

问题描述 投票：0回答：2

:not(p) {
  color: #ff0000;
}
<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

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

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

not(selector)
用于选择未指定元素的每个元素，因此在上面的代码中，我在两个
p
上都得到红色，这是一个未选择的项目。

我只期望 

div
、
a
、
h1
为红色，而不是 
p
，因为 
p
是指定元素，它意味着离开并且样式必须应用于所有其他元素？

html css css-selectors
2个回答
4
投票

选择器

:not(p)
将选择不是p元素的
所有
元素：这包括
html
和
body
。我们在这两个元素上设置 
color
。

此外，属性

color
是默认继承的。

默认继承 

color
并且我们将 
color
上的 
body
设置为红色，
p
元素将从其父级（即 
color
）继承 
body
的红色值。

您可以仅选择 

body
的子元素，这意味着 body 的 
color
的 
事实上的
浏览器默认黑色将由 
p
元素继承，而所有其他不是 
p
的子元素元素的 
color
设置为红色。

注意：使用选择器

body :not(p)
，只有
body
的孩子才会将
color
评估为黑色。其他元素会将 
color
设置为红色，
p
的间接后代 
body
将继承。

但是让 

p
元素拥有某个 
color
最简单的方法是设置它（而不是继承它）。

-1
投票

:not
选择器不是这样工作的。在 
:not
选择器之前，您应该告诉您要从哪个父级中选择。

body :not(p)
针对 HTML 文档中不是段落元素的所有元素，并对它们的文本应用红色 (#ff0000)。

body :not(p) {
    color: #ff0000;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>
<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.