css伪类伪元素

2016-02-19 21:20 5 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐css伪类伪元素,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

  在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(selector)。 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素。

  类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属性,所以此类选择符叫类选择符。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  在CSS2.1中样式通常依附与一个元素在文档树中的位置,这个简单的模型对于许多情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构。例如,在HTML中,没有元素能够引用一个段落的第一行,所以也没有简单的CSS选择符应用它。

  所以,CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树以外信息的格式化。

  伪类:伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是”:first-child”能通过文档树推断出来,”:lang”在一些情况下也在从文档树中推断出来。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  伪类有::first-child ,:link:,vistited,:hover:,active:focus,:lang

  伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们,否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例如::before和:after能够访问产生的内容)。

  伪元素有::first-line,:first-letter,:before,:after

  伪类和伪元素都不出现在源文件和文档树中。

  总结上面可以知道:

  类选择器可以看着属性选择符E[class~=className]在HTML应用中的一种快捷方式,从逻辑和功能上理解有传统类的含义,其被HTML元素预定义的属性class引用,所以叫着类选择器。 伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。 伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。

来源:http://www.tulaoshi.com/n/20160219/1625930.html

延伸阅读
在CSS2.1中的选择符语法见下图,由语法形成了各种选择符。 在CSS2.1中的选择符语法见下图,由语法形成了各种选择符。 欢迎PR值大于3的网站与本站交换链接 类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属...
标签: Web开发
相关阅读文章:CSS3属性选择符介绍 4.7.3 结构伪类(Structural pseudo-classes) CSS 3增加了大量的结构伪类,利用文档结构树来实现表现,从而可以减少页面内class属性和ID属性的定义,使得文档更加简洁。 1. E:root 匹配文档的根元素。在(X)HTML中,根元素就是html元素。例如: :root { border: 1px solid blue; } 在(X)HTML...
标签: Web开发
在CSS网页布局中,不可避免的会涉及到CSS伪类的问题。到底该如何正确的定义CSS伪类呢?虽然webjx中有很多相关的介绍,但复习一下也无妨。大家看下面的代码就能明白。 a.webjxcom{text-decoration:none;} a.webjxcom:link{color:#f90;} a.webjxcom:hover{color:#fff;background-color:#FF5900;} a.webjxcom:active{color:#FF5900;} a href=&...
标签: 饮食禁忌
在我们日常生活当中,有很多食物看上去非常营养,然后实际上却并不是这么回事。那么你知道有哪些饮食误区吗?今天图老师小编告诉大家要小心这8类伪健康食物,一起来了解一下吧! 1、谷物饮料 谷物饮料听起来很健康,也成为很多人喜爱的早餐饮料,然而谷物饮料真的如名字听起来的那么健康吗? 其实不然,如300ml的谷物饮...
标签: Web开发
CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上标准。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我...

经验教程

928

收藏

27
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部