css3 选择器（三）_html/css_WEB-ITnose

接css3选择器（一）

接css3 选择器（二）

这篇和前两篇内容相关性不大，主要是涉及到一些css3的状态选择器，所以标题从一开始。

一、【:enabled】选择器

一看这个属性就知道是专为表单元素提供的。在表单中输入框，密码框，复选框都有可用(:enabled)和不可用（:disabled）状态，默认情况，这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。

举例：可用输入框设置样式。

可用输入框:

禁用输入框:

二、【：disabled】选择器

看到有【:enabled】选择器，就知道肯定有【:disabled】选择器了。看名字就知道:disabled选择器和:enabled选择器相反，用来匹配不可用的表单元素。要使用:disabled选择器，需要在表单元素中设置"disbled"属性。

举例：

三、【:checked】 选择器

在表单元素中，单选按钮和复选按钮都有选中和未选中状态。如果有做过尝试就知道，要设置这两个按钮默认样式是比较困难的。而在css3中，可以通过:checked选择器配合其他标签实现自定义样式。而:checked表示的是选中状态。

这个是个大招，可以省不少功夫。

举例：使用:checked选择器模拟实现复选框样式。

√

我是选中状态

√

我是未选中状态

模拟实现一个选中和未选中的样式。

没有样式时的效果图如下，

最终添加样式后效果如下。

举例：:checked状态选择器模拟单选按钮样式。

男

女

四、【::selection】 选择器

设置选中文本样式，详情见CSS3 ::selection选择器，用的好也可以出奇制胜。

五、【：read-only】选择器

:read-only选择器用来指定处于只读状态元素的样式。简单说就是设置了“readonly”=readonly的元素。

举例：

姓名:
国籍: