伪类、伪元素

Written by 米豆

区分一下

**伪类：**是一种选择器，和 “类选择器” “属性选择器”等这些一样，针对于指定状态的元素

**伪元素：**相当于添加一个新的元素，可以动态的针对于作用的元素来添加新的元素

有点难理解，借用mdn的例子

article p::first-line {
  font-size: 120%;
  font-weight: bold;
}

<article>
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

上面代码的效果

注意看，上面每一段的第一行都是黑体的，::first-line这个伪元素的作用，当我们改变第一行的长度，比如加长

添加了一堆 “f”

第一张图片中第一行是 “magis” 结尾的，第二张图片因为添加了一堆 “f”变成了 “proinde”结尾，可以看到伪元素选择器可以实现动态的往一个元素上添加样式，这是伪类做不到的

但是，如果第一行是固定的内容，也可以用伪类选择器来操作第一行的样式

这里列出两个挺常用的伪元素

`::before`和`::after`

很简单的伪元素选择器，就是用来在一个元素的内容前或者后面（不是元素前或者后面）插入content属性的内容，所以要搭配content属性一块使用

最常见的用法是使用其插入一些图标什么的

比如上面图片最后的这个图标

.box::after {
  content: " ➥";
}

那为什么不直接写到HTML里面呢

如果直接写到文档中，使用屏幕阅读功能（自动读页面上内容）就会去识别这个图标，屏幕阅读器无法正确的读出这个图标

但用伪元素就可以避免掉这个问题

使用其他的伪类或伪元素查询文档就可以了

伪类、伪元素

::before和::after

`::before`和`::after`