奇妙的CSS之伪类与伪元素

我们都知道，在CSS中有很多选择器，例如id(#), class(.),属性[attr]，这些虽然可以满足一些需要，但有时候还力有未逮。伪类和伪元素就提供了一个有益的补充，可以使我们更高效编码。伪类和伪元素是预定义的、独立于文档元素的，它们不是从DOM中获取的，不是基于元素本身特征的(id，类，属性等)。它们从元素的特殊状态来获取，比如元素的兄弟元素，子元素，文本元素的第一个字符等。

CSS伪类： 和一般的DOM中的元素样式不一样，它并不需要任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类产生的样式效果我们也可以通过添加一个class来实现。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，亦或是它所处的环境，而不是元素本身所具有的id、class、属性等静态的标志。当元素的状态变化时，由伪类定义的元素样式也会随之变化，这是和由id(#), class(.),属性[attr]选择器定义的样式是大不相同的。此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

一、UI元素状态伪类

1.  E:hover用于当用户把鼠标移动到元素上面时的效果；
2.  E:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）；
3.  E:focus用于元素成为焦点，这个经常用在表单元素上。
4. E:enable  指定当元素处于可用状态时的样式；
5.  E:disable 指定当元素处于不可用状态时的样式；
6. E:read-only  指定当元素处于只读状态时的样式；
7.  E:read-write 指定当元素处于非只读状态时的样式；

8. E:checked  指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成：-moz-checked)；

9. E:default  指定当页面打开时默认处于选区状态的radio或checkbox控件的样式；

10. E:indeterminate  指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消;

11. E::selection  指定当元素处于选中状态时的样式.

二、结构伪类

1. E:first-child选择某个元素的第一个子元素；
2. E:last-child选择某个元素的最后一个子元素；
3. E:nth-child()选择某个元素的一个或多个特定的子元素；
4.  E:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
5. E:nth-of-type()选择指定的元素；
6. E:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
7. E:first-of-type选择一个上级元素下的第一个同类子元素；
8. E:last-of-type选择一个上级元素的最后一个同类子元素；
9. E:only-child选择的元素是它的父元素的唯一一个了元素；
10. E:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
11. E:empty选择的元素里面没有任何内容。

三、否定选择器

1. E :not() 可以让你定位不匹配该选择器的元素。

CSS伪元素与伪类类似，它可以用来选择元素的某些部分，这些部分可能不包含在<div>或者<span>中，不方便用其他方法来选择。比如，：first-letter伪元素可以用来选择一个元素中文本的第一个字符，这样就可以创建一些特效。

CSS伪元素有：

1. E:first-letter 伪元素向文本的第一个字母添加特殊样式；
2. E:first-line 伪元素向文本的首行添加特殊样式；
3. E:before 伪元素在元素之前添加内容；
4. E:after 伪元素在元素之后添加内容。

那么在CSS3中，也对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了::first-letter,::first-line,::before,::after。另外他还增加了一个::selection，::selection用来改变浏览网页选中文的默认效果。