一::before && :after的用法

:before

如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容。举例说明:

.before:before{content:'you before'; color:red;}

<div class="before"> me</div>

在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before。我们来看效果:

//在指定元素的内容 me 前添加了新内容 you before

我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值为 inline,那么我们可不可以修改新内容区域的属性,答案是肯定的。你可以像修改其他元素一样修改它的样式,我们来将它的 display 属性值来改为block

.before:before{content:'you before'; display:block; color:red;}
<div class="before"> me</div>

现在我们再来看下效果:

//由伪元素 :before 生成新内容区域果然变为了块元素

content 属性

对于伪元素 :before 和 :after 而言,属性 content 是必须设置的,我们知道属性的值可以为字符串,也可以有其它形式,比如指向一张图片的 URL:

 content: url( "img/icon.png" )

配合伪类使用

伪元素 :before 还可以配合伪类使用,这里举经常与 :before 配合使用的伪类 :hover 为例:

.before:hover:before{content:'you before'; color:red;}
<div class="before"> me</div>

配合取值函数 attr() 使用

还有一种较为常见的用法,即配合取值函数 attr() 一起使用,如:

a::before{content: attr(title)}
<a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a>

这个达到的效果跟下面一样:

<a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a>

:after

伪元素 :after 与 伪元素 :before 类型相同,只不过它指定的属性 content 值为出现在指定元素内容的后面,说明省。

二:伪类和伪元素的区别

伪类种类

伪元素种类

伪类:作用对象是整个元素

例如:

a:link
{color:#111}
a:hover
{color:#222}
div:first-child
{color:#333}
div:nth-child(3)
{color:#444}

尽管这些条件不是基于DOM的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,div等等。

伪元素:作用于元素的一部分

例如:

p::first-line
{color:#555}
p::first-letter
{color:#666}
a::before
{content : "hello
world";}

伪元素作用于元素的一部分:一个段落的第一行 或者 第一个字母。

总结:

伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一个元素,然后添加了其相应的效果而已;

而伪类没有伪造元素,例如first-child只是给子元素添加样式而已。

伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。


CSS之 :before && :after的用法,伪类和伪元素的区别的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. CSS 属性 :before && :after的用法,伪类和伪元素的区别

    一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...

  3. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  4. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  5. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  6. 细说CSS伪类和伪元素

    原文 简书原文:https://www.jianshu.com/p/eae56b7fe7fe 大纲 1.伪元素 2.伪类元素 3.伪元素和伪类元素的区别 4.伪类和伪元素的使用 1.伪元素 伪元素在D ...

  7. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  8. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  9. CSS 伪类和伪对象选(五)

    一.伪选择器 伪选择器包括:伪类选择器和伪对象选择器,以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格,否则解析为包含选择器 如: div:hover{ font-size:12p ...

随机推荐

  1. ACM知识点分类

    (知识点分类.看完想(╯‵□′)╯︵┻━┻) orz...一点点来吧.简单标记一下. 蓝色,比较熟悉,能够做. 蓝绿色,一般熟悉,需要加强 红色,(比个辣鸡.jpg) (标记完突然想打人...) 第一 ...

  2. PICE(5):MongoDBStreaming - gRPC -MGO Service

    我在前面提到过MongoDB不支持像SQL般字符式的操作指令,所以我们必须对所有的MongoDB操作指令建立protobuf类型才能支持MongoDB指令的序列化.在对上一篇博文里我们把MongoDB ...

  3. InnoDB体系架构(二)内存

    InnoDB体系架构(二)内存 上篇文章 InnoDB体系架构(一)后台线程 介绍了MySQL InnoDB存储引擎后台线程:Master Thread.IO Thread.Purge Thread. ...

  4. 微信小程序框架与组件

    版权声明:未经博主允许不得转载 前言: 学习微信小程序应该不怎么难吧~下面我来记录一下学习笔记,在学微信小程序的时候,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下 ...

  5. LeetCode--No.015 3Sum

    15. 3Sum Total Accepted: 131800 Total Submissions: 675028 Difficulty: Medium Given an array S of n i ...

  6. Python常用模块——json & pickle

    序列化模块 1.什么是序列化-------将原本的字典,列表等对象转换成一个字符串的过程就叫做序列化 2.序列化的目的 1.以某种存储形式使自定义对象持久化 2.将对象从一个地方传递到另一个地方 3. ...

  7. [EXP]Microsoft Windows 10 - XmlDocument Insecure Sharing Privilege Escalation

    Windows: XmlDocument Insecure Sharing Elevation of Privilege Platform: Windows (almost certainly ear ...

  8. linux中grep/egrep的使用

    grep也是linux中查找的一个利器,运维.程序员必掌握的 下面针对grep的参数进行说明: --color  重点标记匹配到项grep "a word" datafile -- ...

  9. shell编程中的if语句

    if语句在任何编程中都是必不可少.至关重要的分支语句,shell也是如此,只不过各种编程中的方式和格式有点不太一样 shell编程中的if语句基本格式如下: if [ X$1 = XA ];then ...

  10. Linux学习笔记之六————Linux常用命令之系统管理

    <1>查看当前日历:cal cal命令用于查看当前日历,-y显示整年日历: <2>显示或设置时间:date 设置时间格式(需要管理员权限): date [MMDDhhmm[[C ...