【37】CSS3（1）—— 新增选择器④伪元素选择器

倏存

已于 2022-07-12 21:38:46 修改

阅读量704

点赞数 6

分类专栏：前端基础文章标签： css3 原力计划

于 2021-04-08 12:15:25 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115495406

版权

四、伪元素选择器

接着上三篇：
【34】CSS3（1）—— 新增选择器①子级选择器
 【35】CSS3（1）—— 新增选择器②兄弟选择器
 【36】CSS3（1）—— 新增选择器③结构伪类选择器
本篇讲解css3新增的第四种选择器：伪元素选择器。跟结构伪类（选择已有的元素）不同，是添加新的伪元素。

1.新增伪元素

选择器	介绍
`E::before`	在 E 元素内部的前面插入一个元素
`E::after`	在 E 元素内部的后面插入一个元素
`E::first-letter`	选择到了 E 容器内的第一个字母
`E::first-line`	选择到了 E 容器内的第一行文本

2. h5 写法和传统写法区别

单冒号 E:before
双冒号 E::before
浏览器对以上写法都能识别，双冒号是 h5 的语法规范。

3. 伪元素的注意事项

伪元素只能给双标签添加，不能给单标签添加
伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
伪元素里面必须写上属性 content:" "; （因为新创建的元素里必须有点内容才能创建成功，否则看不到，content引号中可以为空）
before 和 after 创建一个元素，但是属于行内元素。（其宽度和高度都是被内容撑开的）
因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。

4.举例

4.1`E::before`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 4.1举例E::before</title>
  <style>
    *{
     
      margin: 0;
      padding: 0;
    }
    .box {
     
      width: 400px;
      padding: 10px;
      border: 1px solid #000;
    }
    .box p {
     
      width: 100px;
      height: 50px;
      margin-bottom: 10px;
      background-color: skyblue;
    }
    /* 给box盒子内部添加伪元素 */
    .box::before {
     
      content: "1";
      display: block;
      height: 50px;
      background-color