CSS 是否有 :blur 选择器(伪类)? [英] Does CSS have a :blur selector (pseudo-class)?

问题描述

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

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

推荐答案

CSS 中没有 :blur 伪类.

There is no :blur pseudo-class in CSS.

动态伪类，和其他伪类一样，在事实上所有其他选择器，代表状态；它们不代表文档树中的事件或状态之间的转换.即: :focus 伪类表示 处于 焦点的元素；它不代表刚刚收到焦点的元素，也不存在:blur伪类来代表刚刚丢失 专注.

The dynamic pseudo-classes, like other pseudo-classes and in fact all other selectors, represent states; they do not represent events or transitions between states in terms of the document tree. To wit: the :focus pseudo-class represents an element that is in focus; it does not represent an element that has just received focus, nor does there exist a :blur pseudo-class to represent an element that has just lost focus.

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

Similarly, this applies to the :hover pseudo-class. While it represents an element which has a pointing device over it, there is neither a :mouseover pseudo-class for an element that has just been pointed to nor a :mouseout pseudo-class for an element that has just been pointed away from.

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

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

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

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

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

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 */
}

这篇关于CSS 是否有 :blur 选择器(伪类)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！