html - CSS-:not(kbd) bug (style is still applying to tags)

Question

示例:

html *:not(kbd):not(textarea) {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
kbd {
  margin-left: 5px;
  margin-right: 5px;
  border-bottom: 1px dotted black;
}

<kbd>abc</kbd><br/>
<textarea>def</textarea><br/>
<p>ghi</p>

错误:

如您所见，该样式应用于 <kbd>和 <p>但不是 <textarea> .

是CSS bug还是浏览器问题还是CSS语法错误？
我使用的是 Chrome 54.0.2840.99(64 位)。

Answer 1

如果您没有为元素设置属性，那么它将从用户代理样式表中获取其默认值。

对于文本区域，即user-select: text。

对于 user-select: inherit 的 kbd 元素。

inherit 意味着它从父元素复制值，在这个例子中是 body 元素。

您的选择器 html *:not(kbd):not(textarea) 确实匹配主体，因此主体元素具有 user-select: none 和 kbd 元素继承了这一点。

您需要:

• 在 kbd 元素上显式设置 user-select 的值或
• 从您的选择器中排除 kbd 元素的祖先

前者可能是更简单的方法。

* {
  user-select: none;
}
textarea,
kbd {
  user-select: text;
}
kbd {
  margin-left: 5px;
  margin-right: 5px;
  border-bottom: 1px dotted black;
}

<kbd>abc</kbd>
<br/>
<textarea>def</textarea>
<br/>
<p>ghi</p>