CSS 类、伪类和伪元素区别详解

CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素添加样式,class是定义在HTML文档树中的。

但是这在一些情况下是不够用的,比如用户的交互动作(悬停、激活等)会导致元素状态发生变化,class对这些动态变化无能为力。

为此,CSS引入了伪类(pseudo-class)的概念用来支持根据文档树以外的信息来过滤元素的能力。

伪类是一个抽象类,本质上还是一个类,因此其主要作用仍然是用来选择元素而后设定具体的样式。

伪类的定义使用:单冒号加上名称,如 mydiv:hover。

伪类的选择对象可能会随着用户操作文档而发生变化,比如当用户删除某些节点后,会影响子元素(nth-child)伪类的选择。

伪类选择元素的依据不是名称、属性或内容,而是根据特征(比如状态或顺序)。(:lang除外)

伪元素(pseudo-element)是另外一个概念,其设计意图和伪类一样,是为了能支持根据文档树以外的信息来进行格式化。

伪元素本质上是一个元素,只是它一般需要依附在一个已有元素上,作为这个元素的“部分”或“补充”。比如::first-line或::after。

CSS2.1规范中引入的新的伪元素语法是双冒号::,但为了和历史版本兼容,一些之前引入的伪元素仍然可以使用单冒号语法。

和伪类用来过滤元素不同,伪元素用来过滤内容或创建补充内容,在这些内容外包装一个虚拟的容器,然后应用特定的样式。

我们可以在伪元素上应用伪类。

这里有一个在线实例,可以很直观的理解两者的使用方式:http://wow.techbrood.com/fiddle/15719

要了解更多伪类、伪元素的用途、实例和区别。

请参考阅读在线教程:http://techbrood.com/Guide/h5b2a?p=css-pseudo-elements

by iefreer

时间: 2024-10-21 07:35:21

CSS 类、伪类和伪元素区别详解的相关文章

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

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

phpcms加载系统类与加载应用类之区别详解

<?php 1. 加载系统类方法load_sys_class($classname, $path = ''", $initialize = 1)系统类文件所在的文件路径:/phpcms/libs/classes/文件夹下参数说明:@param string $classname 类名@param string $path 扩展地址@param intger $initialize 是否初始化 例子:如要调用系统Form类的生成验证码函数:checkcode() ,看下面例子pc_base:

C# —— IList, ArrayList与List的区别详解

共同点: IList, List , ArrayList 通俗一点来讲就是广义的数组,C#里面称之为集合.不同于一般的狭义的数组,它们可以存放任意类型的东西,在申明或者赋值的时候指定. 比如你写了一个类 Cake,然后想有一个结构来存放很多Cake的实例,那就可以用他们. 区别: IList与List 通俗一点讲,只能存放同一类型的元素. 比如声明的时候 声明为List<Cake> cakes=new List<Cake>(); 那么就只能用放cake的实例. 在从cakes这个变

lock与synchronized区别详解

1.线程与进程: 在开始之前先把进程与线程进行区分一下,一个程序最少需要一个进程,而一个进程最少需要一个线程. 线程是程序执行流的最小单位,而进程是系统进行资源分配和调度的一个独立单位. 2.Thread的几个重要方法: 我们先了解一下Thread的几个重要方法. a.start()方法,开始执行该线程:b.stop()方法,强制结束该线程执行:c.join方法,等待该线程结束.d.sleep()方法,线程进入等待.e.run()方法,直接执行线程的run()方法,但是线程调用start()方法

Bind和Eval的区别详解

原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名") %> 区别 1.eval是只读数据,bind是可更新的. 2.当对次表达式操作时候,必须用Eval 如<%# Eval("字段名").ToString().Trim() %> 2.若GridView中绑定列里面 设置 内容格式 DataFormateStri

PHP中include和require的区别详解

1.概要  require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估:而对于require()来说,文件只处理一次(实际上,文件内容替换require()语句).这就意味着如果可能执行多次的代码,则使用require()效率比较高.另外一方面,如果每次执行代码时是读取不同的文件,或者有通过一组文件迭代的循环,就使用include()语句. require的使用方法如:require("myfil

基于Java的打包jar、war、ear包的作用与区别详解

基于Java的打包jar.war.ear包的作用与区别详解 以最终客户的角度来看,JAR文件就是一种封装,他们不需要知道jar文件中有多少个.class文件,每个文件中的功能与作用,同样可以得到他们希望的结果.除jar以外对于J2EE来说还有war和ear. 对照表   jar war ear 英文名字 Java Archive file Web Archive file Enterprise Archive file 包含内容 class.properties文件,是文件封装的最小单元:包含J

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次写的详细一点,把各个部位都拆出来分析. 第一步:头部轮廓 <header></header> .ultraman header

Oracle 中UNDO与REDO的区别详解

    学习设计模式已经有段时间了,初接触设计模式,尽管例子简单.生动,但还是感觉很是抽象.今天又学习了设计模式中的装饰模式,也就是装饰模式让自己对模式略有所懂,装饰模式最大的特点就是把所有需要的功能都按正确的顺序串联起来进行控制.这里需要强调的是"顺序",也就是说这种装饰是建立在一定的顺序之上的,而且这种顺序是由人为控制的:不同于建造者模式,它的顺序是固定不变的. **概念     动态地给一个对象添加一些额外的职责,就增加的功能来说,装饰模式比生成子类更为灵活. **结构图