CSS 是否有 :blur 选择器（伪类）？答案

【问题标题】：Does CSS have a :blur selector (pseudo-class)?CSS 是否有 :blur 选择器（伪类）？
【发布时间】：2012-07-27 01:02:17
【问题描述】：

我知道有一个:focus 选择器。我似乎找不到 :blur 选择器的使用或文档。有吗？

【问题讨论】：

标签： css css-selectors pseudo-class

【解决方案1】：

不，CSS 没有 blur 伪选择器，大概是因为 blur 更像是一个事件而不是一个状态。（不清楚什么时候应该失去模糊状态）。

【讨论】：

【解决方案2】：

默认情况下，所有常规选择器都不聚焦。所以你不需要特殊的模糊选择器。

这些是优先选择器。

.myButton
.myButton:hover
.myButton:focus
.myButton:active

【讨论】：

【解决方案3】：

CSS 中没有 :blur 伪类。

dynamic pseudo-classes 与其他伪类以及实际上所有其他选择器一样，代表状态；它们不代表文档树中的事件或状态之间的转换。也就是说：:focus 伪类代表一个元素，在焦点；它不代表刚刚收到焦点的元素，也不存在:blur伪类来代表刚刚失去焦点的元素。

同样，这适用于:hover 伪类。虽然它表示一个上面有一个指针设备的元素，但对于刚刚指向的元素既没有:mouseover 伪类，也没有一个元素的:mouseout 伪类刚刚指向远离。

如果您需要将样式应用于不在焦点中的元素，您有两种选择：

使用:not(:focus)（浏览器支持较少）：

input:not(:focus), button:not(:focus) {
    /* Styles for only form inputs and buttons that do not have focus */
}

声明适用于任何元素的规则，无论其焦点状态如何，并覆盖具有焦点的元素：

input, button {
    /* Styles for all form inputs and buttons */
}

input:focus, button:focus {
    /* Styles for only form inputs and buttons that have focus */
}

【讨论】：

.button:not(:focus) 是否等于 .button？他们选择相同，但后者的特异性为 10，第一个的特异性为 20。
@Torsten Walter：不，它们不同； .button 将匹配该类的所有元素，无论它们是否处于焦点，而.button:not(:focus) 将永远不会匹配.button:focus 匹配的元素。一起使用.button 和.button:focus 的原因是为了利用级联。但是，是的，后者不太具体。
对。我没有从这个角度考虑。
如果您只想在用户将注意力集中在左侧之后才设置样式怎么办？例如，您不会想在某人加载页面时因为他们没有输入密码而大喊大叫，只有在他们离开输入之后。
@Marcel：那么您将需要使用 JavaScript 事件处理程序，例如使用与您所需样式对应的类来更新元素。 CSS 仅适用于状态而不适用于事件，这意味着就 CSS 而言，一个元素要么在焦点上，要么不在焦点上。特别是，它不知道自页面加载后元素是否已获得焦点（除非您在事后通过更新 DOM 来告诉它，这只有脚本才能做到）。

【解决方案4】：

使用通用过渡设置模糊过渡。

.example {
  transition-property: opacity;
  transition-duration: 2s; /* This will happen after the hover state and can also be used for consistency on the overall experience */
  opacity: 0;
}
.example:hover {
  opacity: .8;
  transition-duration: .3s;
  transition-delay: .1s;
}

【讨论】：