CSS 伪类和伪元素的用法和区别

伪类

伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。简单说就是弥补常规CSS选择器的不足，具体都有哪些伪类

 对于大部分人来说，用到最多的就是状态和结构化的，简单使用就不多做介绍了，下面看一个比较有意思的栗子

.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
  color: red
}

  <ul class="list">
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
  </ul>
  <ul class="list">
    <li>列表2</li>
    <li>列表2</li>
    <li>列表2</li>
  </ul>

 看一下是什么效果

可以看到这是完全通过css来感知子元素的个数

:nth-last-child(n+4)这一个选择器的意思就是倒数第四个以及之前的元素，后面加了~ li，就是表示符合前面条件的元素之后的li元素。

如果元素总数不足4，则不会存在符合:nth-last-child(n+4)的元素（一共没有四个，也就不存在倒数第四个），那么li:nth-last-child(n+4) ~ li就不会选择任何的元素了。

但是如果只用~li，是不会匹配到第一个li的，所以又加上了li:nth-last-child(n+4):first-child

 

伪元素

伪元素本质上是创建了一个有内容的虚拟容器

说几种常用的伪元素

::before（在被选元素之前插入内容） ::after（在被选元素之后插入内容）  都需要指定content属性来插入内容

::first-line（匹配元素中第一行的文本，只能在块元素中使用）

::selection（匹配被用户选中的部分,只可以应用于少数的CSS属性：color, background, cursor,和outline。）

    .aa::before {content: '123'}
    .aa::after {content: '678'}
    .aa::first-line {color: red}
    .aa::selection {background: blue}

<div class="aa" style="width: 100px">内容内容内容内容内容内容内容内容内容内容内容内容</div>

 

区别

1.伪类的操作对象是文档树中已有的元素。伪元素则创建了一个文档树外的元素，用户可以看到这些文本，但是这些文本实际上不在文档树中。根本区别在于：有没有创建一个文档树之外的元素。

2.语法不同。CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

3.伪元素只能出现在末尾 div:hover::before  不能写div::before span