定义

伪元素选择器：就是有连续两个冒号的选择器，如::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. Spring3.x 升级至 Spring4.x 详解

    1 升级依赖包 1.1 Maven 项目 1.1.1 更新 spring 依赖版本 打开 pom.xml,把所有 spring3.x 的版本号更新为 spring4.x.建议使用属性配置,形如: &l ...

  2. thinkphp 项目不能直接域名访问 而要加index.php 才能访问

    一.apache 服务器配置问题 vim /usr/local/apache2/conf/httpd.conf 在ifModule这里加入index.php <IfModule dir_modu ...

  3. JAVA泛型通配符T，E，K，V区别，T以及Class<T>，Class<?>的区别

    1. 先解释下泛型概念 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛 ...

  4. Categorical Data

    This is an introduction to pandas categorical data type, including a short comparison with R's facto ...

  5. [LeetCode] 53. Maximum Subarray 最大子数组 --动态规划+分治

    Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...

  6. kwargs - Key words arguments in python function

    This is a tutorial of how to use *args and **kwargs For defining the default value of arguments that ...

  7. linux下将一系列.o文件打包成.a文件

    参考链接:https://www.cnblogs.com/joshtao/p/7380627.html

  8. ActiveMQ点对点模式

    1.安装ActiveMQ服务器(略) 2.启动ActiveMQ,浏览器访问8161端口,默认账号admin/admin 3. 生产者代码 package test001; import org.apa ...

  9. 关于SQL Server系统数据库详解

    介绍这里我们介绍SQL Sever内部的系统数据库的作用和用户数据库之间联系,关于SQL Sever如何管理用户数据库的原理,对于每个数据库开发人员和DBA都是必须掌握的. SQL Sever系统数据 ...

  10. Python3解leetcode Path Sum III

    问题描述: You are given a binary tree in which each node contains an integer value. Find the number of p ...