CSS中的伪元素选择器

定义

伪元素选择器：就是有连续两个冒号的选择器，如::first-line::first- letter、::before 和::after

  1. E::first-letter文本的第一个单词或字（如中文、日文、 韩文等）
  2. E::first-line 文本第一行；
  3. E::selection 可改变选中文本的样式；
  4. E::before和E::after

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style type="text/css">
          p::first-letter {  /* 选择第一个字 */
            color: red;
            font-size: 25px;
          }

          p::first-line {   /* 选择第一行 */
            color: green;
            font-size: 20px;
          }

          p::selection {  /*  选中变色 */
            color: blue;
          }

          div:before {    /* 放在盒子内部的前面 */
            content:"一只";
          }
          div:after {    /* 放在盒子内部的后面插入 */
            content:"猪";
          }
    </style>
</head>
<body>
    <h1>静夜思</h1>
    <p>床前明月光，疑是地上霜。举头望明月，低头思故乡</p>
    <div>特立独行的</div>
</body>
</html>

实现效果

 

posted @ 2019-11-06 13:19  用脑袋行走的人  阅读(2066)  评论(0)  编辑  收藏  举报