html - :not and text-decoration bug? 发送到哪里

Question

我想我发现了 :not 选择器的错误，我不确定在 CSS 中提交错误的位置？

text-decoration 将应用于 :not 中的元素

看看我放在一起的这个小代码笔，颜色应用正确，但下划线不是。

https://codepen.io/miketricking/pen/YWKGyJ

p {
    color: #000000;
}

:not(p) {
    color: red;
    text-decoration: underline;
}

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

Answer 1

文本修饰被应用于 body 和 html，连同 h1 和 div。所有四个元素都匹配 :not(p)。正文中的装饰正在传播到 p 元素，这就是为什么您会看到红色下划线(因为它的 color: red 声明用于呈现下划线)。这不是任何浏览器中的错误或规范中的错误——相反，这是 stated very deliberately in the spec .

你可以通过在你的选择器前添加 body 来解决这个问题，但它只适用于顶级 p 元素，而不适用于出现在其他匹配的元素中的任何元素 :not(p)并传播他们的文字装饰:

p {
    color: #000000;
}

body :not(p) {
    color: red;
    text-decoration: underline;
}

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

不幸的是，如果不更改其显示类型并在此过程中破坏布局，则无法阻止文本装饰传播到 p 元素。参见 this answer .