CSS3状态伪类选择器及兄弟元素选择器

今天来学习CSS3的另一大类伪类选择器——状态伪类选择器。“状态伪类”顾名思义，选择的是一种状态，对元素某一状态定义样式，即该元素只在某种状态下才使用指定样式；默认状态下（或非某种状态下）是不采用指定样式的。

1、:hover选择器、:active选择器和:focus选择器

:hover选择器：表示选择当鼠标悬停在某元素上的这种状态时指定样式；
:active选择器：表示选择当某元素处于激活状态（鼠标在该元素上按下还没有松开）的这种状态时指定样式。

以上两个选择器在超链接中经常用到，很容易理解，所以我们可带着同样的理解方式来看下面其它状态伪类选择器。

:focus选择器：表示选择当元素获得光标焦点这种状态时指定样式，主要用于指定文本框输入文字时的样式。（示例附后）

2、:enabled选择器和:disabled选择器

:enabled选择器：表示选择当某元素处于可用状态时指定样式；
:disabled选择器：表示选择当某元素处于不可用状态时指定样式。

这俩选择器通常用于form元素，因为form元素有可用和不可用状态，以往为他们定义样式时，我们分别为它们定义不同的class，然后通过JS对其元素设置可用状态的同时指定不同的class来实现。然而有了CSS3就没必要这么麻烦了，JS只需要指定可用状态，样式会自己选择，JS代码也非常精简，易用多了。（示例附后）

3、:read-only选择器和:read-write选择器

:read-only选择器：表示选择当某元素处于只读状态时指定样式；
:read-write选择器：表示选择当某元素处于非只读状态时指定样式。

这俩选择器除了具体状态和功能不同外，用法与前面两个是一样的，就不贴示例了。

4、:default选择器、:checked选择器和:indeterminate选择器

这三个选择器是针对复选框和单选框来使用的，目前只有Opera浏览器支持最好！

:default选择器：表示选择当前元素处于非选取状态时的单选框或复选框指定样式；
:checked选择器：表示选择当前元素处于选取状态时的单选框或复选框指定样式；
:indeterminate选择器：表示选择当页面打开时，某组中的单选框或复选框元素还没有选取状态时指定样式。（示例附后）

5、::selection选择器

此选择器使用了两个“:”不是笔误，这是它的标准写法哦。主要是用来选择某元素处于选中状态时指定样式。还有就是你可能会一下想到下拉列表select，不过这里不是下拉列表，就是一个选中状态选择器。（示例附后）

小结：Ok，CSS伪类选择器，就告一段落了。那基本上所有选择器都学习完了，不过最后在此还给大家介绍一个通用兄弟选择器，以此来结束我们的选择器学习吧。

Element ~ 兄弟元素选择器——表示选择位于同一个父级元素下的某元素之后的所有其他某个种类的兄弟元素来指定样式。（示例附后）

下面贴上此节所备示例代码：