CSS伪类和伪元素

伪类和伪元素

伪类

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的
比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
:hover,:link,:active,:target,:not(),:focus。

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式
比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
::first-letter,::first-line,::before,::after

区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。
因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

伪类种类

1 状态

1. :link
   选择未访问的链接
2. :visited
   选择已访问的链接
3. :hover
   　选择鼠标指针浮动在其上的元素
4. :active
   选择活动的链接
5. :focus
   选择获取焦点的输入字段

2 结构化

1. :not
   一个否定伪类，用于匹配不符合参数选择器的元素。
   li:not(.first-item) {
   color: orange;
   }

2. :first-child
   匹配元素的第一个子元素。
   li:first-child{
   color: orange;
   }

3. :last-child
   匹配最后一个元素
   li:last-child{
   color: orange;
   }

4. :first-of-type
   匹配属于其父元素的首个特定类型的子元素的每个元素。

   <ul>
      <li>这里的文本是橙色的</li>
      <li>一些文本 <span>这里的文本是橙色的</span></li>
      <li>一些文本</li>
   </ul>
   ul :first-of-type {
      color: orange;
   }
   //第一个<li>元素和第一个<span>元素的文本会变为橙色

5. :last-of-type
   匹配元素的最后一个子元素。
   上例中最后一个li会变为橙色

6. :nth-child
   :nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：
   1n+0，或n，匹配每一个子元素。
   2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。
   2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
   3n+4匹配位置为4、7、10、13…的子元素
   ol:nth-child(2) {
   color: orange;
   }
   ol:nth-child(even) {
   color: orange;
   }
   ol:nth-child(2n+6) {
   color: orange;
   }

7. :nth-last-child
   :nth-last-child与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的。

8. :nth-of-type
   与nth-child相似，不同之处在于它是只匹配特定类型的元素。

9. :nth-last-type
   与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的

10. :only-child
    当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。

11. :only-of-type
    当元素是其父元素中唯一一个特定类型的子元素时

12. :target
    当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。

表单

1. :checked
   :checked匹配被选中的input元素，这个input元素包括radio和checkbox。

2. :disabled
   :disabled匹配禁用的表单元素。

3. :default
   :default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。

4. :empty
   :empty匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素。

5. :enabled
   :enabled匹配没有设置disabled属性的表单元素。

6. :in-range
   :in-range匹配在指定区域内元素。
   input[type=number]:in-range {
   border: 5px solid green;
   }

7. :out-of-range
   :out-of-range与:in-range相反，它匹配不在指定区域内的元素。

8. :indeterminate
   indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时，:indeterminate匹配该组中所有的单选框或复选框。

9. :valid
   :valid匹配条件验证正确的表单元素。

10. :invalid
    :invalid与:valid相反，匹配条件验证错误的表单元素。

11. :optional
    :optional匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性。
    

12. :required
    :required与:optional相反匹配设置了required属性的表单元素。
    

13. :read-only
    :read-only匹配设置了只读属性的元素，表单元素可以通过设置“readonly”属性来定义元素只读。
    

14. :read-write
    :read-write匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态。

其他

1. :dir(处于实验阶段)
   :dir匹配指定阅读方向的元素，当HTML元素中设置了dir属性时该伪类才能生效。现时支持的阅读方向有两种：ltr（从左往右）和rtl（从右往左）。目前，只有火狐浏览器支持:dir伪类，并在火狐浏览器中使用时需要添加前缀( -moz-dir() )。

2. :lang
   :lang匹配设置了特定语言的元素，设置特定语言可以通过为了HTML元素设置lang=””属性，设置meta元素的charset=””属性，或者是在http头部上设置语言属性。
   实际上，lang=””属性不只可以在html标签上设置，也可以在其他的元素上设置。

3. :root
   :root匹配文档的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素则可能是其他元素。

4. :fullscreen
   :fullscreen匹配处于全屏模式下的元素。全屏模式不是通过按F11来打开的全屏模式，而是通过Javascript的Fullscreen API来打开的，不同的浏览器有不同的Fullscreen API。目前，:fullscreen需要添加前缀才能使用。

伪元素种类

1. ::before/:before
   :before在被选元素前插入内容。需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中。
2. ::after/:after
   :after在被元素后插入内容，其用法和特性与:before相似。
3. ::first-letter/:first-letter
   :first-letter匹配元素中文本的首字母。被修饰的首字母不在文档树中。
4. ::first-line/:first-line
   :first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。
5. ::selection
   　::selection匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz-前缀。该伪元素只支持双冒号的形式。
6. ::placeholder
   ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。

伪元素使用

1.清除浮动

.cf:after {
clear: both;
}

2.模拟float:center

#l:before, #r:before { 
  content: ""; 
  width: 125px; 
  height: 250px; 
}
#l:before { 
  float: right; 
}
#r:before { 
  float: left; 
}
//左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

3.做出各种图形效果

/#star-six的div是一个正三角行，#star-six::after是一个倒三角形，通过绝对定位，调整其位置即可实现六角星的效果

4.不使用图片创建小图标

有大神用伪元素创建了84种小图标，具体可查看http://nicolasgallagher.com/pure-css-gui-icons/

5.显示打印网页的URL

6. 给blockquote添加引号

：:before 来代替 background

7. 超链接特效

配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果

8. ::before和::after实现多背景图片

一个标签应用5张背景图

参考：http://www.cnblogs.com/mycoke/p/6056187.html