定义

伪元素选择器：就是有连续两个冒号的选择器，如::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>

实现效果

CSS中的伪元素选择器的更多相关文章

  1. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  2. 理解 CSS 中的伪元素 :before 和 :after

    CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...

  3. css中的伪元素，我今天记住了！o~yeah

    对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中.带着 ...

  4. css 中的伪类选择器before 与after

    .cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...

  5. CSS_03_04_CSS伪元素选择器

    第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器 :状态 效果顺序:L V H A */ a:link.lin_01{/*超链接,未 ...

  6. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  7. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  9. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

随机推荐

  1. div+css做出带三角的弹出框 和箭头

    一.三角形 https://blog.csdn.net/Szu_AKer/article/details/51755821 notice:三角的那部分可以用图片作为背景,但是容易出现杂边.所以利用cs ...

  2. Linux下python pip手动安装笔记

    今天查问题, 从redis集群中模糊查询某个key, 用一些重复的命令, 链接不同的node, redis-cli 去查, 感觉不舒服. 考虑写一些shell或py来简化一下. 一查环境, 安装了py ...

  3. Java初步

    Java的核心优势:跨平台 Java SE:标准版Java EE:企业级Java ME:微型版 源文件(*.java)→编译器→字节码文件(*.class)→(类装载器→字节码校验器→解释器)[JRE ...

  4. pspice建立仿真模型元件库

    摘自:http://royroyyy.blog.163.com/blog/static/1376506172011026102216175/ PSpice9.2电子元器件模型--由网页下载的model ...

  5. handy源码阅读（二）：EventsImp类

    EventsImp用于完成事件的处理. class EventsImp { EventBase* base_; PollerBase* poller_; std::atomic<bool> ...

  6. BZOJ 3675: [Apio2014]序列分割 动态规划 + 斜率优化 + 卡精度

    Code: #include<bits/stdc++.h> #define N 100006 #define M 205 #define ll long long #define setI ...

  7. Microsoft SQL Server 简介

    SQL Server 是Microsoft 公司推出的关系型数据库管理系统.具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越从运行Microsoft Windows 98 的膝上型电脑到运行M ...

  8. 如何安全修改cocoapods上的第三方代码

    其实搞java的都知道maven管理,解决第三方代码修改的办法就是架一个服务器,把这些修改的库放在这里,然后再maven里配置哪些需要用本地仓库的.其实cocoapods也可以做本地包管理: 大致方法 ...

  9. SSL异常javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure

    jdk 7 http://www.oracle.com/technetwork/java/javase/downloads/jce-7-download-432124.html jdk 8 http: ...

  10. p5471 [NOI2019]弹跳

    分析 代码 #include<bits/stdc++.h> using namespace std; #define fi first #define se second #define ...