css中的类和伪类
作者:YanKaven 来源:蓝色理想 发布时间:2008-06-12 13:12:00
在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(selector)。 一条CSS规则(rule)是选择器{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素。
在CSS2.1中的选择符语法见下图,由语法形成了各种选择符。
类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属性,所以此类选择符叫类选择符。
在CSS2.1中样式通常依附与一个元素在文档树中的位置,这个简单的模型对于许多情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构。例如,在HTML中,没有元素能够引用一个段落的第一行,所以也没有简单的CSS选择符应用它。
所以,CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树意外信息的格式化。
伪类:伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。
伪类有::first-child ,:link:,vistited,:hover:,active:focus,:lang
伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们,否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例如::before和:after能够访问产生的内容)。
伪元素有::first-line,:first-letter,:before,:after (在苏沈小雨编的CSS2.0中文手册中把:first-line,:first-letter列为伪类应该是理解上的错误)
伪类和伪元素都不出现在源文件和文档树中。
总结上面可以知道:
类选择器可以看着属性选择器在HTML应用中的一种快捷方式,从逻辑和功能上理解有传统类的含义,其被HTML元素预定义的属性class引用,所以叫着类选择器。
伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。
猜你喜欢
- Online人们搜索、浏览、阅读、跟帖、互动投票,玩游戏,甚至在线买卖交易。这些行为都是“用户体验”,听起来用户体验似乎无所不能,造成了互联
- asp中使用addnew方法添加一条记录后,我们经常使用取得自递增的ID,而使用bookmark很容易实现这样的功能。rs.open&nbs
- 网页采用了 UTF-8 编码格式,这本来没有问题,问题是外部 CSS 文件默认是 ANSI
- 五花八门的SQL产品多得要命,或许你早顾不得其它甩开袖子就动手干了。但你要同时采用ASP和SQL的话就可能会头晕。MySQL、SQL Ser
- 阅读上一篇:打造设计你自己的字体 ⅠMyFonts.com上销售的字体总数已经超过55,000个。现有字体的巨大数量表明了一个事实:我们在设
- 今天我们整理了ip地址和身份证的javascript验证方法。虽然ip地址和身份证的验证不是很经常会遇到,但是大家也可以研究一下js代码,里
- 用Dreamweaver制作网页时,如果插入的图片、GIF动画、声音、视频或链接的网页是用中文命名的,在用IE浏览器浏览时可能显示不出来。以
- 现在使用CSS网页布局,摒弃了传统Table表格布局的模式,但是Table表格在网页中还是少不了的,因为当需要输出表格类数据时,就应该使用表
- 代码如下:'返回某年总共有多少天 Function DayOfYear(ByVal y) DayOfYear = DatePart(
- 今天想围绕“产品交互设计”说说一些我们的想法,一说到产品设计,我想在坐的各位脑海里肯定联想到了很多表单设计、导航设计、界面布局等等,但是今天
- 为什么使用事务 当对多个表进行更新的时候,某条执行失败。为了保持数据的完整性,需要使用事务回滚。 显示设置事务 代码如下:beg
- 加号+, 是字符串优先.并且从左向右计算. 就是运算前后两个值,只要有一个是字符串,就会将其中一个非字符串的试图转换成字符串.
- 在web开发中经常遇到多关键词对对单个字段查询,我一般是通过动态数组来实现的。当然多个关键词的一般是用空格或,隔开,我这几假设多个关键词用空
- 写这个文章绝对是偶然的偶然的机会,前年等一回的 元旦节,和 老婆上街 溜达,猛然想起买上一张福利彩票,结果屁都没有中上,开春第一
- 代码如下: <% '屏蔽主流的下载工具 Dimxurl,xtool '获取浏览器AGENT xurl=lcase(Re
- 其实在很久很久之前就发现search类型的input,该属性值是WebKit私有,不过一直没去查相关的属性,介于XXX原因,我找出其属性,回
- 环境:A机器和B机器都是LINUX系统,但由于B机器已经空间不足,所以停掉不停操作数据库的服务后 ,准备在A机器进行导出操作。导出语句 ex
- 行业首页改版的缘故,为了让我们设计师可以更好的了解需求、了解我们的用户,和部门的用研童鞋一起讨论决定使用电话来进行用户访谈,以此来了解用户。
- 1. document.form.item 问题 (1)现有问题:现有代码中存在许多 document.formName.item(&quo
- 见以下两个文件:showimage.asp Change the HTTP header