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

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.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 在此处查看: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值的新的快速提示/课程。

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”属性。

<input type="text"/> 
<input type="text" disabled/>

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/