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

电玩女神 2024-04-19 13:04 82阅读 0赞

## 伪类 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70][]

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

.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>

看一下是什么效果

![20190918171017604.png][]

可以看到这是完全通过**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>

![201909181733140.png][]

## 区别 ##

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f41ab9db3dea4e25bb7af9aa2361ec63.png
[20190918171017604.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d776ef83ad59434ab670716dd2264f4e.png
[201909181733140.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0de5095ef58a49299905a4b76463be3f.png