CSS 是不是有 :blur 选择器（伪类）？

Posted 2023-03-06

【中文标题】CSS 是不是有 :blur 选择器（伪类）？

【英文标题】：Does CSS have a :blur selector (pseudo-class)?CSS 是否有 :blur 选择器（伪类）？

【发布时间】：2012-07-27 01:02:17

【问题描述】：

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

【参考方案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;