AtoZ CSS快速提示：如何使用已启用的伪类进行样式设置

比眉伴天荒 2022-12-03 09:57 101阅读 0赞

This article is a part of our AtoZ CSS Series. You can find other entries to the series [here][]. View the full screencast and transcript for the `:enabled` pseudo-class [here][here 1].

本文是我们的AtoZ CSS系列的一部分。 您可以在[此处][here]找到该系列的其他条目。 在[此处][here 1]查看`:enabled`伪类的完整屏幕录像和解说词。

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the `:enabled` value for you.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，以字母中的一个字母开头。 我们知道有时候视频广播还不够，在本文中，我为您添加了有关`:enabled`值的新的快速提示/课程。

![E2-01][]

## E代表`:enabled` **(**E is for `:enabled`**)** ##

There’s a number of pseudo-classes in CSS. These pseudo-classes help us style different states and target specific elements based on their relationship or position to other elements. The `:enabled` and `:disabled` pseudo-classes style form elements that can or cannot be filled in or selected.

CSS中有许多伪类。 这些伪类可帮助我们设置不同状态的样式，并根据它们与其他元素的关系或位置来定位特定元素。 `:enabled`和`:disabled`伪类对可以填充或不能填充或选择的表单元素进行样式设置。

The `:enabled` pseudo-class can be used to style the enabled state of form elements such as `button`, `input`, `optgroup`, `option`, `select` and `textarea` elements. Elements that can have an `:enabled` state also have a corresponding `:disabled` state.

`:enabled`伪类可用于设置表单元素(如`button` ， `input` ， `optgroup` ， `option` ， `select`和`textarea`元素)的启用状态。 可以具有`:enabled`状态的元素也具有对应的`:disabled`状态。

These states are set by the boolean `disabled` attribute. It’s important to note that there isn’t an “enabled” attribute even though there is an `:enabled` pseudo-class.

这些状态由布尔`disabled`属性设置。 重要的是要注意，即使存在`:enabled`伪类，也没有“ enabled”属性。

Therefore, these elements can be styled either by their pseudo-class, with an attribute selector or with a negated attribute selector:

因此，可以使用伪类，属性选择器或否定的属性选择器来设置这些元素的样式：

input:enabled { }
    input:not([disabled]) { }
    input:disabled { }
    input[disabled] { }

There’s no real difference between using any of these; they’re all supported in IE9+, and they all have the same specificity.

使用其中任何一个都没有真正的区别。 它们都在IE9 +中受支持，并且都具有相同的特异性。

I’m not sure how often using these selectors will come up, but it’s interesting to look at all the different ways of approaching the same problem.

我不确定使用这些选择器的频率如何，但是看一下解决同一问题的所有不同方法很有趣。

> 翻译自: [https://www.sitepoint.com/atoz-css-enabled-pseudo-class/][https_www.sitepoint.com_atoz-css-enabled-pseudo-class]

[here]: https://www.sitepoint.com/tag/atoz-css/
[here 1]: https://www.sitepoint.com/atoz-css-screencast-enabled
[E2-01]: /images/20221123/085bbe6ebade4cac82206e7803daee66.png
[https_www.sitepoint.com_atoz-css-enabled-pseudo-class]: https://www.sitepoint.com/atoz-css-enabled-pseudo-class/