CSS - ：not（kbd）bug（样式仍然适用于<kbd>标签）

Question

实施例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

错误：

您可以看到该样式适用于<kbd>和<p>，但不适用于<textarea>。

是CSS错误还是浏览器问题或CSS语法错误？ 我使用的是Chrome 54.0.2840.99（64位）。

Answer 1

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

对于textarea，即user-select: text。

对于kbd元素user-select: inherit。

inherit表示它从父元素复制值，在此示例中是body元素。

您的选择器html *:not(kbd):not(textarea)与正文匹配，因此正文元素具有user-select: none，而kbd元素继承该正文。

您需要：

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

前者可能是更容易的方法。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

CSS1 - ＆gt;英语：html标签的每个后代都将收到一个3px的纯绿色边框，除了kbd和textarea（他们是坏孩子的地方）

CSS2 - ＆gt;英语：kbd然而会收到一种红色（因为他真的很糟糕！）

然后kbd和textarea永远不会收到边框，而且kdb在生命中终点为红色。

如此结论您的CSS规则工作，您只需使用更可视的CSS规则作为示例。

html *:not(kbd):not(textarea) {
  border: 3px solid green;
}
kbd {
  color: red;
}

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

Answer 3

尝试使用父级，在本例中为body，而不是html。

body *: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>

Answer 4

使用您的父母代替div.yourclass让其无法选择

div.yourclass *: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;
  color: red;
}
kbd {
  margin-left: 5px;
  margin-right: 5px;
  border-bottom: 1px dotted black;
}

<div class="yourclass">
  <kbd>abc</kbd>
  <br/>
  <textarea>def</textarea>
  <br/>
  <p>ghi</p>
</div>