定义

伪元素选择器：就是有连续两个冒号的选择器，如::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. 【串线篇】spring boot日志使用

    一.默认配置 1.SpringBoot默认帮我们配置好了日志: //记录器 Logger logger = LoggerFactory.getLogger(getClass()); @Test pub ...

  2. koa2 进阶网站

    http://www.ruanyifeng.com/blog/2017/08/koa.html  阮一峰 https://www.itying.com/koa/ koa2中文网 https://blo ...

  3. rocketmq架构设计

    # 架构设计 1 技术架构 RocketMQ架构上主要分为四部分,如上图所示: Producer:消息发布的角色,支持分布式集群方式部署.Producer通过MQ的负载均衡模块选择相应的Broker集 ...

  4. SPOJ VLATTICE - Visible Lattice Points 【“小”大数加减】

    题目链接 一道比较简单的莫比乌斯反演,不过ans会爆long long,我是用结构体来存结果的,结构体中两个LL型变量分别存大于1e17和小于1e17的部分 #include<bits/stdc ...

  5. Flask路由之重定向

    Flask框架提供了请求重定向功能,只需要使用 redirect_to即可, 示例代码如下: from flask import Flask, render_template, request, re ...

  6. Chronograf启动（Influxdb的管理平台）

    1.创建一个bat文件,文件内容如下 @echo off:: 开启chronograf服务,服务监听端口9084echo 开启chronograf服务chronograf.exe /port 9084 ...

  7. 如何分析及处理 Flink 反压？

    反压(backpressure)是实时计算应用开发中,特别是流式计算中,十分常见的问题.反压意味着数据管道中某个节点成为瓶颈,处理速率跟不上上游发送数据的速率,而需要对上游进行限速.由于实时计算应用通 ...

  8. MySQL跑得慢的原因分析

    第一点,硬件太老 硬件我们这里主要从CPU.内存.磁盘三个方面来说下,还有一些因素比如网卡,机房网络等因为文章篇幅关系,就不一一介绍了,以后还有机会可以聊. 首先我们来看下MySQL对CPU的利用特点 ...

  9. apache主要配置详解

    1. # Deny access to the entirety of your server's filesystem. You must # explicitly permit access to ...

  10. 影视感悟专题---1、B站-魔兽世界代理及其它乱七八糟

    影视感悟专题---1.B站-魔兽世界代理及其它乱七八糟 一.总结 一句话总结: 看过的东西都可以学下,这样既可以学习那些东西,都是对自己生活学习有帮助的,还可以弥补自己每天学的东西的不够 1.< ...