专栏首页前端开发ZEHAN关于:before和::before的区别 至 伪类和伪元素的区别

关于:before和::before的区别 至 伪类和伪元素的区别

::before 是一个伪类元素,代表生成的内容元素,表示相应元素的可抽象样式的第一个子元素,即:所选元素的第一个子元素 利用::before可以把需插入的内容插入到元素的其他内容之前,并且默认内联显示。::before需要使用content属性来指定内容的值。

区别:

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

那么现在就可以完整的回答标题中的问题了,对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。

所以,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。

常见的伪类和伪元素元素和

伪类种类(分为结构性伪类和状态性伪类)

伪类

作用

:active

将样式添加到被激活的元素

:focus

将样式添加到被选中的元素

:hover

当鼠标悬浮在上方时,向元素添加样式

:link

将特殊样式添加到未访问过的链接

:visited

将特殊样式添加到被访问过的链接

:first-child

将特殊样式添加到元素的第一个子元素

:lang

允许作者定义元素中能使用的语言

:last-child

选择某个元素的最后一个子元素;

:nth-child()

选择某个元素的一个或多个特定的子元素;

:nth-last-child()

选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

:nth-of-type()

选择指定的元素;

:nth-last-of-type()

选择指定的元素,从元素的最后一个开始计算;

:first-of-type

选择一个上级元素下的第一个同类子元素;

:last-of-type

选择一个上级元素的最后一个同类子元素;

:only-child

选择的元素是它的父元素的唯一一个子元素;

:only-of-type

选择一个元素是它的上级元素的唯一一个相同类型的子元素;

:empty

选择的元素里面没有任何内容。

:checked

匹配被选中的input元素,这个input元素包括radio和checkbox。

:default

匹配默认选中的元素,例如:提交按钮总是表单的默认按钮。

:disabled

匹配禁用的表单元素。

:enabled

匹配没有设置disabled属性的表单元素。

:valid

匹配条件验证正确的表单元素。

伪元素种类

伪元素

作用

::first-letter

将样式添加到文本的首字母

::first-line

将样式添加到文本的首行

::before

在某元素之前插入内容

::after

在某元素之后插入内容

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css高度坍塌与清除浮动

    但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父元素的高度塌陷了,则父元素下的所有元素都...

    ZEHAN
  • let和var和const

    第一段代码中函数在执行时,是找不到变量i的值的,所以要往上一层作用域中找 他的上一层作用域是全局作用域,也就是不符合循环条件的值 为 2

    ZEHAN
  • JS中的原型和原型链

    2、所有的引用类型都有一个’_ proto _'属性(也叫隐式原型,它是一个普通的对象)。

    ZEHAN
  • 勇闯28个关卡学会HTML与HTML5基础

    我自学前端已经有6年多了,自问当时学前端是没有系统化学习的。一开始边看文档,连滚带爬学HTML和CSS排版,然后深入研究JavaScript,因为当时最火的就是...

    三钻
  • 总结伪类和伪元素(转)

    先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述:

    山河木马
  • 前端入门系列之HTML

    超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是...

    王大锤
  • C++STL 2——序列容器 array、vector 、deque、 list 和 forward_list

    序列容器以线性序列的方式存储元素。它没有对元素进行排序,元素的顺序和存储它们的顺序相同。

    种花家的奋斗兔
  • Pseudo elements伪元素与Pseudo classes伪类

    ::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content...

    gojam
  • CSS入门3-认识html之元素

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 如何使用python进行web抓取?

    本文摘要自Web Scraping with Python – 2015 书籍下载地址:https://bitbucket.org/xurongzhong/py...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券