CSS 伪类和伪元素--pseudo
总结在前:
0. 参考资料
1. 伪类和伪元素是不同的两种东西。
2. 伪类和伪元素都属于CSS选择器。
3. CSS引入伪类和伪元素是为了实现基于文档树之外的信息,i.e. 段落的第一行,的格式化。
4. 伪类和伪元素都不出现在源文件和文档树中。
伪类:一开始单单只是用来表示一些元素的动态状态,典型的是<a>的 LVHA四个状态,CSS2标准扩展了概念范围, 使其成为了所有逻辑上存在,但在文档树中却无须标识的分类。
伪元素:代表某个元素的子元素,虽然这个子元素在逻辑上存在, 但是不存在于文档树中。
5. CSS3中为区分二者使用冒号,但是还没有完全实现,目前都是单冒号:
-- 伪类用一个冒号 :first-child
-- 伪元素用两个冒号 ::first-line
详细一点谈:
在CSS中可以将类选择器视为正则中的模式, div.value 等同于 div[class~=value] ,CSS中的样式通常依附于一个元素在文档树中的位置,这个模型对于大多数情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构,如first-line,没有简单的CSS选择器可以应用到它,而且它也是动态变化的。
伪类: 伪类对元素的划分是基于特征的,而不是基于他们的名字、属性或者内容,原则上特征是不可以从文档树中推断得到的(那是怎么实现的呢?)。伪类可以是动态的,在用户和文档进行交互的时候,一个元素可以得到或者失去一个伪类。 :first-child 和 :lang 某些情况可以用文档树推断,是例外。伪类有: :first-child, :link, :vistited, :hover:, active:focus, :lang
伪元素:创造关于文档语言能够制定的文档树之外的抽象。 如: 文档语言不能提供访问元素内容的第一个letter或者第一行的机制,而使用伪元素可以办到。伪元素还给不存在源文件中的内容分配样式,i.e. :before 和 :after
伪类可以独立于文档的元素来分配样式,而且可以分配给任何元素(最常见的是 a 元素,也可以应用到其他元素上如 li ),逻辑上和功能上和类类似(i.e.都有匹配的作用),但是其是预定义的,不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容是一样的, 但是伪元素不是真正的元素,不存在于文档树中(可以动态添加到文档中), 不是真正的元素。
CSS 伪类和伪元素--pseudo的更多相关文章
- 谈谈css伪类与伪元素
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...
- css中伪类和伪元素的区别
转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
- 详解 CSS 属性 - 伪类和伪元素的区别[转]
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- CSS的伪类和伪元素
伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...
随机推荐
- 通过socket实现处理多个连接,send和resv都是有数量限制的
我们现在先来实现,跟一个人来来回回不停的讲电话. 客户端,通过循环来输入多次命令: client.recv(1024)每次只接收1K的内容 服务端来改成多次接收:如果你写成如下的代码: 那么造成的结果 ...
- i2c驱动程序全面分析,从adapter驱动程序到设备驱动程序
开发板 :mini2440 内核版本:linux2.6.32.2 驱动程序参考:韦东山老师毕业班i2c 内容概括: 1.adapter client 简介 2.adapter 驱动框架 ...
- CDH5.10.0 离线安装(共3节点) 转
1.安装方式 CDH的离线部署安装,即Parcel包(推荐) 2.角色规划 三个节点对应的角色: 3.基本环境配置(在每个节点上都要配置) (1)关闭防火墙 #/etc/init.d/iptables ...
- netcore中使用log4net日志
第一.控制台程序中使用log4net static void Main(string[] args) { ILoggerRepository repository = LoggerManager.C ...
- ETL开源工具kettle学习笔记
一 Kettle配置与部署 参考1:http://www.cnblogs.com/limengqiang/archive/2013/01/16/KettleApply1.html 1.下载kettle ...
- [OpenCV Qt教程] 在Qt图形界面中显示OpenCV图像的OpenGL Widget(第二部分)
本文译自:http://www.robot-home.it/blog/en/software/tutorial-opencv-qt-opengl-widget-per-visualizzare-imm ...
- ListBox和ComboBox绑定数据简单例子
1. 将集合数据绑定到ListBox和ComboBox控件,界面上显示某个属性的内容 //自定义了Person类(有Name,Age,Heigth等属性) List<Person> per ...
- C#利用QrCode.Net生成二维码(Qr码
http://www.cnblogs.com/Soar1991/archive/2012/03/30/2426115.html 现在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二 ...
- 初识Dash -- 构建一个人人都能够轻松上手的界面,操控数据和可视化
从事数据科学工作,少不了使用Pandas.scikit-learn这些Python生态系统中的利器,还有就是控制工作流的Jupyter Notebooks,没的说,你和同事都爱用.但是,要想将工作成果 ...
- httpd 系统错误 无法启动此程序,因为计算机中丢失VCRUNTIME140.dll
说来话长的搭了一个discuz论坛,服务器是apache,我本地的是直接从官网下的(值得吐槽的是官网居然拿不提供编译版本么要从第三方网站获取,不知道为何....),对应apache之前是搭bug管理系 ...