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

CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。
属性 描述
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时,向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个子元素添加样式
:lang 向带有指定lang属性的元素添加样式
备注:在 CSS 定义中,同一个元素的 :hover 必须位于 :link、:visited 之后才能生效,:active 必须位于 :hover 之后才能生效。

css伪元素 (Pseudo-elements):用于向某些选择器设置特殊效果,是对元素中的特定内容进行设置和操作,操作层次比伪类更深,故动态性比伪类要差。

属性 描述
:first-letter 向文本的第一个字母添加特殊样式
:first-line 向文本的首行添加特殊样式
:before 在元素之前添加内容
:after 在元素之后添加内容

w3c 对两者的定义:

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

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

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

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

  4. 详解 CSS 属性 - 伪类和伪元素的区别[转]

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

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

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

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

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

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

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

  8. CSS伪类和伪元素

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

  9. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

随机推荐

  1. ffmpeg中的sws_scale算法性能测试

    经常用到ffmpeg中的sws_scale来进行图像缩放和格式转换,该函数可以使用各种不同算法来对图像进行处理.以前一直很懒,懒得测试和甄 别应该使用哪种算法,最近的工作时间,很多时候需要等待别人.忙 ...

  2. ruby中字符的转换

    1.将表格名转成class名 classify "book_comments".classify => "BookComment"   2.class名转 ...

  3. HIVE: SerDe应用实例

    数据文件内容 id=123,name=steven id=55,name=ray 期望输出格式 123 steven 55 ray 1. 创建表, 用正则表达式的形式指定格式 create table ...

  4. Python 之 MySQL 操作库 lazy_mysql

    TOC Intro Installation Tutorial API Engine Pool Column Table Intro lazy_mysql 是一个非常简单易用,用来操作 MySQL 的 ...

  5. When to use dequeueReusableCellWithIdentifier vs dequeueReusableCellWithIdentifier: forIndexPath

    The most important difference is that the forIndexPath: version asserts (crashes) if you didn't regi ...

  6. 转 iOS Core Animation 动画 入门学习(一)基础

    iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...

  7. DDD:当视图模型、领域模型和数据模型都采用了同样的类型的时候,我们该如何处理?

    如果采用这种模式,模型会在不同的逻辑层之间传递,以向内传递为例,模型的状态变化是由外向内的不同逻辑层负责修改的,因为这种模式下模型的封装性是很差的,架构和框架要做到:清晰的表达每个逻辑层该如何使用和修 ...

  8. sql order by 排序多个字段

    order by 多个字段,每个字段后面都有排序方式,默认ASC 例如:select table a order by a.time1 ,a.time2 desc,a.time3 asc

  9. Parameter配置文件获取

    public class ConfigInfo { public static ParametersHelper Parameters { get { return new ParametersHel ...

  10. java switch语句注意的事项

    1.switch语句使用的变量只能是byte.char.short.string数据类型. 2.case后面gender数据必须是一个常量. 3.switch的停止条件: switch语句一旦比配上了 ...