CSS伪元素与伪类的区别
伪类和伪元素介绍
- 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
- :first-child
- :link:
- :visitive
- :hover
- :active
- :focus
- :lang
伪元素:与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
- :first-line
- first-letter
- :before
- :after
- :link 伪类将应用于未被访问过的链接,与:visited互斥。
- :hover 伪类将应用于有鼠标指针悬停于其上的元素。
- :active 伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。
- :visited 伪类将应用于已经被访问过的链接,与:link互斥。
- :focus 伪类将应用于拥有键盘输入焦点的元素。
- :first-child 伪类将应用于元素在页面中第一次出现的时候。
- :lang 伪类将应用于元素带有指定lang的情况。
- :first-letter伪元素的样式将应用于元素文本的第一个字(母)。
- :first-line 伪元素的样式将应用于元素文本的第一行。
- :before 在元素内容的最前面添加新内容。
- :after 在元素内容的最后面添加新内容。
CSS伪元素与伪类的区别的更多相关文章
- CSS的伪元素和伪类
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-l ...
- css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
- CSS 基础 例子 伪元素和伪类 & 区别
一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...
- CSS(二)- 选择器 - 伪元素和伪类(思维导图)
伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- CSS——伪元素与伪类
伪类与伪元素 伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :vi ...
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
- CSS3伪元素、伪类选择器
伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
随机推荐
- struts2的字符串参数
一定要熟记一个东西,一层引号的是变量,两层引号的是字符串 如"蓝"/'蓝'是变量,而" '蓝' "/ ' "蓝" '是字符串 打代码时要警惕 ...
- 机器学习完整过程案例分布解析,python代码解析
所谓学习问题,是指观察由n个样本组成的集合,并依据这些数据来预測未知数据的性质. 学习任务(一个二分类问题): 区分一个普通的互联网检索Query是否具有某个垂直领域的意图.如果如今有一个O2O领域的 ...
- IsoAlgo3d - IDF/PCF pipeline 3d viewer
IsoAlgo3d - IDF/PCF pipeline 3d viewer eryar@163.com Key Words. IDF, PCF, IsoAlgo, 3D 当前国际主流管道设计软件都可 ...
- js--11对象的创建方式
<html> <head> <title>Object</title> </head> <body> <script ty ...
- zoj 1119 / poj 1523 SPF (典型例题 求割点 Tarjan 算法)
poj : http://poj.org/problem?id=1523 如果无向图中一个点 u 为割点 则u 或者是具有两个及以上子女的深度优先生成树的根,或者虽然不是一个根,但是它有一个子女 w, ...
- css+ js 实现圆环时钟
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Think Pad笔记本分区解决思路及方法
Think pad笔记本分区解决思路及方法 近日好友拿着新买的Thinkpad X300过来找我,说这个笔记本只有一个分区,所有的东西不得放在C盘,希望再多分出几个分区.抱怨原先在wind ...
- Fragment-生命周期
Fragment生命周期图 一.Fragment的几种状态: 与Activity类似,Fragment也有一下几种状态: · 活动状态:当前Fragment位于前台,可见,可获得焦点. · 暂停状态: ...
- UVA 12075 Counting Triangles
https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...
- deep-in-es6(一)
一 迭代器和for-of循环 以前的一些遍历数组: function c(n) { console.log(n); } 方法一: for(let i = 0;i < arr.length;i++ ...