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

Does CSS have a :blur selector (pseudo-class)?

提问by BoltClock

I know there is a :focusselector. I can't seem to find use of or documentation of a :blurselector. Is there one?

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

回答by BoltClock

There is no :blurpseudo-class in CSS.

:blurCSS 中没有伪类。

The dynamic pseudo-classes, like other pseudo-classes and in fact all other selectors, represent states; they do not represent eventsor transitions between statesin terms of the document tree. To wit: the :focuspseudo-class represents an element that is infocus; it does not represent an element that has just receivedfocus, nor does there exist a :blurpseudo-class to represent an element that has just lostfocus.

该动态伪类，像其他伪类，事实上所有其他选择，代表国家; 它们不代表文档树方面的事件或状态之间的转换。即：在:focus伪类表示的元素是在焦点; 它不代表刚刚获得焦点的元素，也不存在:blur代表刚刚失去焦点的元素的伪类。

Similarly, this applies to the :hoverpseudo-class. While it represents an element which has a pointing device over it, there is neither a :mouseoverpseudo-class for an element that has just been pointed tonor a :mouseoutpseudo-class for an element that has just been pointed away from.

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

If you need to apply styles to an element that is not infocus, you have two choices:

如果您需要将样式应用于未聚焦的元素，您有两种选择：

1. Use :not(:focus)(with less browser support):

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

2. Declare a rule that applies to any element regardless of its focus state, and override for elements that 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 */
   }
   

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

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

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

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

回答by Utkanos

No, CSS has no blur pseudo-selector, presumably because blur is more of an event than a state. (It would be unclear when something should lose its blur state).

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

回答by Torsten Walter

All regular selectors are by default not focussed. So you don't need a special blur selector.

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

These are the selectors by precedence.

这些是优先级的选择器。

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

回答by userDepth

Use the general transition to set the blur transition.

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

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