CSS3伪类与伪元素（整理）

伪类选择器

伪类选择器： 和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

  常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪元素选择器

伪元素选择器：伪元素的效果是需要通过添加一个实际的元素才能达到的。

CSS中有如下四种伪元素选择器：
· :first-line:为某个元素的第一行文字使用样式；
· :first-letter:为某个元素中的文字的首字母或第一个字使用样式；
· :before:在某个元素之前插入一些内容；
· :after: 在某个元素之后插入一些内容；

  使用方法：选择器：伪元素{
      样式}

结构性伪类选择器

 1.  四个最基本的：root、not、empty、target    

 2. first-child、last-child、nth-child、nth-last-child、               
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even) 

 3.  nth-of-type、nth-last-of-type    
 4. 循环使用样式  
 5. only-child

:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。“:root”选择器等同于元素

:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素。

:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：

        :nth-child(length);/*参数是具体数字*/
        :nth-child(n);/*参数是n,n从0开始计算*/
        :nth-child(n*length)/*n的倍数选择，n从0开始算*/
        :nth-child(n+length);/*选择大于length后面的元素*/
        :nth-child(-n+length)/*选择小于length前面的元素*/
        :nth-child(n*length+1);/*表示隔几选一*/
        //上面length为整数

值得注意的是：nth-child(0)没有选择元素，nth-child(1)选择第一个元素。

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。

css3中的伪元素

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;

那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了::first-letter,::first-line,::before,::after另外他还增加了一个::selection。

在css3中，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个

p::first-line {
      font-weight:bold;}

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，

            .clearfix:before,
            .clearfix:after {
                 content: ".";
                 display: block;
                 height: 0;
                 visibility: hidden;
              }
             .clearfix:after {
      clear: both;}
             .clearfix {
      zoom: 1;}

::selection用来改变浏览网页选中文的默认效果

---

UI状态元素伪类选择器

E:checked ： {attribute}

匹配所有用户界面（form表单）中处于选中状态的元素E

E:enabled ： {attribute}

匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled ： {attribute}

匹配所有用户界面（form表单）中处于不可用状态的E元素

E::selection ： {attribute}

匹配E元素中被用户选中或处于高亮状态的部分

---

目标伪类

E:target ： {attribute}

匹配相关URL指向的E元素

伪类与伪元素的区别
这里我大可以列一个表格，把所有的伪类和伪元素分开罗列，但这未免太形式化，与其记住“哪些是哪些不是”，不如真正地加以区分。伪类和伪元素本身就有一个根本的不同之处，这点直接体现在了标准的描述语句上。
先看一个伪元素 first-line 例子。现在有一段HTML，内容是一个段落：

代码如下:

I am the bone of my sword. Steel is my body, and fire is my blood.
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.

如果我要描述这个段落的第一行，在不用伪元素的情况下，我会怎么做？想来我一定要嵌套一层 span，然后加上类名:

代码如下:

I am the bone of my sword. Steel is my body, and fire is my blood.
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.

再反观一个伪类 first-child 的例子，有一个简单的列表：

代码如下:

如果我要描述 ul 的第一个元素，我无须嵌套新的元素，我只须给第一个已经存在的 li 添加一个类名就可以了：

代码如下:

尽管，第一行和第一个元素，这两者的语意相似，但最后作用的效果却完全不同。所以，伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。而这也是为什么，标准精确地使用 “create” 一词来解释伪元素，而使用 “classify” 一词来解释伪类的原因。一个描述的是新创建出来的“幽灵”元素，另一个则是描述已经存在的符合“幽灵”类别的元素。

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

伪类和伪元素混淆的由来
最为混淆的，可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类，而且即使在概念混淆的情况下，实际使用上也毫无问题——因为即使概念混淆，对真正使用也不会造成多少麻烦:)
CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分：
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line

并且规定，浏览器既要兼容CSS1和2里既存的伪元素的单冒号表示，同时又要不兼容CSS3新引入的伪元素的单冒号表示。后来的结果大家都知道，因为低版本IE对双冒号的兼容问题，几乎所有的CSSer在写样式的时候都不约而同的使用了单冒号。这无形中，让这种混淆延续了下来。而CSS3新伪元素的使用到目前为止，还远远不成气候。