首先,阅读 w3c 对两者的定义:

  • CSS 伪类用于向某些选择器添加特殊的效果。
  • CSS 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类

伪元素种类

区别

这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

p>i:first-child {color: red}
<p>
    <i>first</i>
    <i>second</i>
</p>

 //伪类 :first-child 添加样式到第一个子元素
如果我们不使用伪类,而希望达到上述效果,可以这样做:

.first-child {color: red}
<p>
    <i class="first-child">first</i>
    <i>second</i>
</p>

即我们给第一个子元素添加一个类,然后定义这个类的样式。那么我们接着看看为元素:

p:first-letter {color: red}
<p>I am stephen lee.</p>

 //伪元素 :first-letter 添加样式到第一个字母
那么如果我们不使用伪元素,要达到上述效果,应该怎么做呢?

.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>

即我们给第一个字母添加一个 span,然后给 span 增加样式。
两者的区别已经出来了。那就是:

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

总结

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

:Pseudo-classes
::Pseudo-elements

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

详解 CSS 属性 - 伪类和伪元素的区别[转]的更多相关文章

  1. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  2. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  3. 详解 CSS 属性 - :before &amp;&amp; :after

    现在我们经常在 html 源码中看到如下的写法: 这里的 ::after 和 ::before 就是我们今天来探讨的 css 伪元素之二 - :before && :after. 伪元 ...

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

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

  5. 关于css伪类,伪元素详解总结

    伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰.常见的几种伪类是: :link , :visited , :hover , :active , :first-ch ...

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

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

  7. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

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

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

  9. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

随机推荐

  1. Transistor 晶体管 场效应 双极型 达林顿 CMOS PMOS BJT FET

    Transistor Tutorial Summary Transistor Tutorial Summary Bipolar Junction Transistor Tutorial We can ...

  2. 连接Oracle远程数据库错误:ORA-12541,ORA-12514,ORA-01017的解决方法!

    1.出现如下错误:ORA-12541:TNS:no listener,如下图所示: 错误原因是我们没有开启Listener监听器服务,解决方法是在服务中开启这个服务,如下图所示. 2.出现如下错误:O ...

  3. JSONKit 简单使用

    http://blog.csdn.net/l_ch_g/article/details/8477187 例子上写的比较浅显易懂, 不过我还是稍微总结一下: 导入JSONKit.h之后 字符串转NSDi ...

  4. ubuntu下Vim配色方案Solarized的配置

    系统:ubuntu 12.04 LTS vim版本:7.4 ---------------------------------------------------------------------- ...

  5. mysql中如何嵌套使用insert和select

    如何在mysql从多个表中组合字段然后插入到一个新表中,通过一条sql语句实现.具体情形是:有三张表a.b.c,现在需要从表b和表c中分别查几个字段的值插入到表a中对应的字段.对于这种情况,我们可以使 ...

  6. iOS中使用Localizable.strings适配App在不同语言下文本的显示

    iOS开发中,若是使用xib或storyboard搭建界面视图,视图中固定显示的文本内容可以用localized添加不同语言适配.但是在实际中会有动态加载的文本,这些文字的适配就需要NSLocaliz ...

  7. jQuery进行简单验证的正则表达式

    下面都是一些比较常用简单的验证,像那些特殊的复杂的情况这里不进行考虑 1.验证电话号码或者手机号码 ? 1 2 3 4 5 6 7 8 9 10 /**  * 验证电话号码(手机号码+电话号码)  * ...

  8. 转载:ECMAScript 6简介

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...

  9. vector 向量容器用法祥解

    vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 用法:         ...

  10. 高并发秒杀系统方案(集成Mybatis和Redis)

    1.集成Mybatis 第一步,添加依赖: <dependency> <groupId>org.mybatis.spring.boot</groupId> < ...