CSS – 元素选择器 – 伪元素选择器

简介

所谓伪元素，它既是元素但是也是伪的，元素是标签，容器，能包含内容的，但不会在DOM树中生成，因此称为伪元素。

E::before

E::before : 定义在一个元素的内容之前插入 content 属性定义的内容与样式。

 E::before{
  content: "";
  position: absolute; // 要设置宽高，需要使它设置为块级元素
 }

E::after

E:after : 定义在一个元素的内容之后插入 content 属性定义的内容与样式

 E::after{
  content: "";
  position: absolute;  // 要设置宽高，需要使它设置为块级元素
 }

E::first-letter

E::first-letter 实现文本的第一个字母或字（不是词组）

p::first-letter{
  color: red;
}

<p>123456<br>7890</p>   >> "1" 会变成红色

E::first-line

E::first-line 实现选择文本的第一行

p::first-line{
  text-decoration: underline;
}

<p>123456<br>7890</p>   >> "123456" 会添加下划线

E::selection

E::selection 实现选中文样的样式

p::selection{
  background-color: pink;
  color: red;
  font-size: 30px;
}

<p>123456<br>7890</p>   >> 选中时背景色为粉色，文字变红色，但文字大小不变

 注意：::selection 只能设置显示的样式，而不能设置内容大小

关于伪元素

1.E::before 在旧版本里是伪类，在新版本里是伪元素，新版本下的 E:before 会被自动识别为 E::before,按伪元素来对待，这样做的目的是用来做兼容处理。

2.必须添加 content ,哪怕不设置内容，也需要 content:""

3.是一个行内元素，如果想设置宽高刚需要转换成块：display:block,position