CSS3新增选择器——伪元素选择器

2023-6-16

定义

利用CSS创建新标签元素，这个新标签元素在HTML文档结构中不显示，但新标签元素又是一个行内元素，所以称为其伪元素。这一类元素选择器就称为伪元素选择器。

作用

简化HTML结构。精简代码。

语法

element::before{ content: ''; }

content属性是必备属性。

代码练习

统一HTML结构

<div>和</div>

添加基础样式

div {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

添加'::before'：在元素内部的前面插入内容

div::before {
  content: '::before';
}

添加'::after'：在元素内部的后面插入内容

div::after {
  content: '::after';
}

用途

1.清除浮动样式

之前学习清除浮动样式有四种方式，分别是：

额外标签法，又称隔墙法；
给浮动子元素的父级元素添加overflow属性；
父级元素添加after伪元素；
父级元素添加双伪元素。

上两种方法在此不多赘述，主要分析后两种添加伪元素的方法。

父级元素添加after伪元素：

.clearfix:after {
  content:"";   /* 该属性是伪元素标签必备属性 */
  display: block;     /* 伪元素本身是行内元素，该属性是将伪元素标签转换为块级元素 */
  height: 0;    /* 该属性是为了不显示伪元素 */
  clear: both;  /* 该属性是清除浮动的本质代码 */
  visibility: hidden;    /* 该属性是为了不显示伪元素 */
}

父级元素添加双伪元素：

.clearfix:before,
.clearfix:after {
  content: "";    /* 该属性是伪元素标签必备属性 */
  display: table;    /* 该属性是为了使新创建的元素转换为块级元素且在一行显示 */
}
.clearfix:after {
  clear: both; 
}

2.字体图标的使用

HTML结构

<div></div>

添加基本样式

div {
  width: 200px;
  height: 35px;
  border: 1px solid black;
  position: relative;
}

在字体图标网站下载图标之后，引入默认字体图标样式并修改字体图标文件路径。

/* 引用字体图标样式 */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?j7zncs');
  src: url('../fonts/icomoon.eot');
  src:  url('../fonts/icomoon.eot?j7zncs#iefix') format('embedded-opentype'),
  url('../fonts/icomoon.ttf?j7zncs') format('truetype'),
  url('../fonts/icomoon.woff?j7zncs') format('woff'),
  url('../fonts/icomoon.svg?j7zncs#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

添加字体图标并设置其样式。

div::after {
  font-family: 'icomoon';
  /*  content: '';*/
  /* 需要将字体图标代码进行转义 */
  content: 'ea43';
  position: absolute;
  top: 8px;
  right: 5px;
  color: red;
}

THE END