CSS伪元素选择器——每日一讲

什么是伪元素？

CSS伪元素用于设置元素指定部分的样式，添加一些选择器的特殊效果。

例如：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

语法

伪元素的语法

selector::pseudo-element{
	property:value;
}

注：CSS类也可使用伪元素
语法：

selector.class::pseudo-element {
	property:value;
}

所有CSS伪元素

选择器	例子	例子描述
::after	h1::after	在每个 p 元素之后插入内容
::before	h1::before	在每个 p 元素之前插入内容
::first-letter	h1::first-letter	选择每个 p 元素的首字母
::first-line	h1::first-line	选择每个 p元素的首行
::selection	h1::selection	选择用户选择的元素部分

::after

::after伪元素可用于在元素内容之后插入一些内容
实例：
在 <h4>元素之后插入一个图像

h4::after {
            content:"";
            width: 300px;
            height: 240px;
            background-image:url("st.jpg");
            background-size: cover;
            display: inline-block;
        }

::before

::before 伪元素可用于在元素内容之前插入一些内容

实例：
在<h4>元素之前插入before

h4::before{
	content:"before";
	color: wheat;
}

::first-letter

::first-letter伪元素用于向文本的首字母添加特殊样式

实例：
设置<h4>元素中文本的首字母格式

h4::first-letter {
  color: gray;
  font-size: 50px;
}

::first-line

::fiest-line伪元素用于向文本的首行添加特殊样式

实例：
给<p>元素中首行添加样式

p::first-line{
	color: aliceblue;
	background-color: black;
	font-family: 方正姚体;
	font-size: 35px;
}

::selection

::selection伪元素匹配用户选择的元素部分

实例：
使鼠标所选的文本在黄色背景上显示为红色

.hover::selection{
	background-color: yellow;
	color: red;
}

注：以上实例就展示了伪元素可以与CSS类结合使用