1.伪元素和伪类的区别

在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，如 ::before为伪元素 ； :hover为伪类；
由于IE8只支持单冒号的格式，安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧！
伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。
伪类有：:first-child ，:link:，vistited，:hover:，active:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after，::selection

2.伪元素基本语法

仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：

尽管作为“虚假”的元素，事实上伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。

示例：利用伪类实现列表箭头

a::after { content: "›"; font-size：54rpx; }
.navigator-arrow::after {
  content: " ";
  display: inline-block;
  height: 18rpx;
  width: 18rpx;
  border-width: 3rpx 3rpx 0 0;
  border-color: #cdcdcd;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -8rpx;
  right: 15rpx;
}

content用法

伪元素的特有属性content，可以包含文字，图片，调用属性，调用计数器等。

1、content : “string”

可以在节点之前插入文字

div::before{ content: '*'; }

2、content : attr(attrName);

利用 伪类 的 content 属性 attr 抓取内容

比如：可以在节点之前插入属性data-name的值 value

<div class="demo" data-name="helloworld"></div>

div::before{ content: attr(data-name); }

比如：鼠标悬浮实现一个提示的文字

<div data-msg="Open this file in Github Desktop"> hover</div>

div{width:100px;border:1px solid red; position:relative;}
div:hover::after{
  content:attr(data-msg);
  position:absolute;
  font-size: 12px;
  width:200%;
  line-height:30px;
  text-align:center;
  left:0;top:25px;
  border:1px solid green;
}

3、content:url();

插入媒体文件，如图片

div::before{ content: url(/images/logo.png); }

3.伪类的基本用法

1、利用 :valid 和 :invalid 来做表单即时校验

html5 丰富了表单元素，提供了类似 required,email,tel 等表单元素属性。同样的，我们可以利用 :valid 和 :invalid 来做针对html5表单属性的校验。
:valid 伪类指定一个通过匹配正确的所要求的表单元素
:invalid 伪类指定一个不匹配指定要求的表单元素

<div class="container">
  <div class="row" style="margin-top: 2rem;">
    <form> 
            <div class="form-group"> 
                <label>name</label> <input type="text" required placeholder="请输入名称"> 
            </div> 
            <div class="form-group">
                <label>email</label> <input type="email" required placeholder="请输入邮箱">
      </div>
            <div class="form-group">
                    <label>homepage</label> <input type="url" placeholder="请输入博客url">
            </div> 
            <div class="form-group"> 
                    <label>Comments</label> <textarea required></textarea> 
            </div>
    </form> 
  </div> 
</div>

.valid { border-color: #429032; box-shadow: inset 5px 0 0 #429032;}
.invalid { border-color: #D61D1D; box-shadow: inset 5px 0 0 #D61D1D;}
.form-group { width: 32rem; padding: 1rem; border: 1px solid transparent; 
  &:hover { border-color: #eee; transition: border .2s; }
  label { display: block; font-weight: normal; } 
  input, textarea { display: block; width: 100%; line-height: 2rem;
    padding: .5rem .5rem .5rem 1rem; border: 1px solid #ccc; outline: none; 
  &:valid { @extend .valid; } &:invalid { @extend .invalid; } }}

http://blog.dimpurr.com/css-before-after/

2、:not()

:not表示不包含； :not伪类选择器表示不为括号中的指定元素应用样式，语法 :not(selector) 其中的selector为css选择器

demo: 为列表项设置下边框，但不包含最后一个li

ul.nav li:not(:last-child) {
  border-bottom: 1px solid #666;
}

p:first-of-type 选择属于其父元素的首个元素
 p:last-of-type 选择属于其父元素的最后元素
 p:only-of-type 选择属于其父元素唯一的元素
 p:only-child 选择属于其父元素的唯一子元素
 p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

4.伪元素伪类汇总整理

::after

::before

::backdrop

::content

::cue

::cue()

::cue-region

::cue-region()

::first-letter

::first-line

::grammar-error

::placeholder

::selection 选择器匹配被用户选取的部分

::shadow

::spelling-error

:active

:any-link

:checked

:corner-present

:decrement

:default

:define

:dir

:disabled

:double-button

:empty

:enabled

:end

:first

:first-child

:first-of-type

:focus

:focus-visible

:focus-within

:fullscreen

:future

:horizontal

:host

:host()

:host-context()

:hover

:in-range

:increment

:indeterminate

:invalid

:lang()

:last-child

:last-of-type

:left

:link

:matches()

:no-button

:not()

:nth-child()

:nth-last-child()

:nth-last-of-type()

:nth-of-type()

:only-child

:only-of-type

:optional

:out-of-range

:past

:placeholder-shown

:read-only

:read-write

:required

:right

:root

:scope

:single-button

:start

:target

:valid

:vertical

:visited

:window-inactive