CSS伪类和伪元素

伪类和伪元素

伪类

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

伪元素

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

区别

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

伪类种类

1 状态

2 结构化

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

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

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

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

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

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

: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;
}

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

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

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

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

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

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

表单

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其他

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

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

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

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

伪元素种类

伪元素使用

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的p是一个正三角行，#star-six::after是一个倒三角形，通过绝对定位，调整其位置即可实现六角星的效果

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

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

5.显示打印网页的URL

6. 给blockquote添加引号

：:before 来代替 background

7. 超链接特效

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

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

一个标签应用5张背景图