定义

伪元素选择器：就是有连续两个冒号的选择器，如::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. dsu on tree 学习笔记

    这是一个黑科技,考虑树链剖分后,每个点只会在轻重链之间转化\(log\)次. 考虑暴力是怎么写的,每次枚举一个点,再暴力把子树全部扫一边. \(dsu\ on\ tree.\)的思想就是保留重儿子不清 ...

  2. 对Promise的研究3

    Promise.race() Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例. const p = Promise.race([p1, p2, p ...

  3. python中sort与sorted区别

    1.sort()函数 (只对list有用) sort(...) L.sort(key = None,reverse=False) key = 函数 这个函数会从每个元素中提取一个用于比较的关键字.默认 ...

  4. 算法-python

    选择排序:一个列表被分为无序列表和有序列表,选择排序就是拿无序列表的第一个和后面的每一个相比较,每一趟选择出最小的一个,添加进有序列表. def select_sort(list): for i in ...

  5. [CF959F]Mahmoud and Ehab and yet another xor task题解

    搞n个线性基,然后每次在上一次的基础上插入读入的数,前缀和线性基,或者说珂持久化线性基. 然后一个num数组记录当时线性基里有多少数 然后每次前缀操作一下就珂以了 代码 #include <cs ...

  6. git 代码强行提交

    git add . git commit -m "your comment" git push -u origin master -f

  7. 用三目运算，与if判断 函数调用 达到相同判定作用

    三目运算符:     操作数1 ? 操作数2 : 操作数3   (操作数1位bool类型,操作数2和操作数3为两个相同的任何类型) 返回结果:如果操作数1判定结果为真,则将操作数2作为返回结果如果操作 ...

  8. datagrid选择一行

    onLoadSuccess:function(value, rec){ $("#sinopec_search_btn").linkbutton('enable'); var dat ...

  9. 修改MySQL表varchar字段的小实验

    将actor表的first_name的varchar(45) ,修改为varchar(60) [root@vhost1 ~]# mysql -uroot -p -S /mysqldata/tmp/my ...

  10. TNS-12535

    Fatal NI connect error 12170. VERSION INFORMATION: TNS for Linux: Version 11.2.0.3.0 - Production Or ...