Html CSS 伪类 Select 器未按预期工作

发布于09月15日

我有以下情景:

超文本标记语言

.input {
  color: red;
}

.input:not(:disabled, :read-only):hover {
  color: blue;
}

<input class="input" type="text" value="Hello">
<div class="input">Hello</div>

因此，悬停效果不会应用于div元素，但如果我从css中删除:read-only伪类部分，它将会apply.

为什么会发生这种情况？?

推荐答案

您正在使用的:not() Select 器正在应用AND逻辑，因此这两个要求都需要为真.:not(:disabled)和:not(:read-only).Div与第二个div不匹配(只有输入匹配)，因此悬停效果将不起作用.

如果您将其设置为可编辑，它将与输入内容类似

.input {
  color: red;
}

.input:not(:disabled, :read-only):hover {
  color: blue;
}

<input class="input" type="text" value="Hello">
<div class="input" contenteditable>Hello</div>