对CSS伪类和伪元素的终极指南
发布在切云!您的前端切图服务专家2016年8月19日view:581HTML5CSSCordyJavaScriptj's插件
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

各位好,在我早期的网页设计生涯中,我学东西是通过一种特别的笨的方式:反复试验,从失败总结经验。当时没有像现在一样有类似于smashing magazine, coedepen这样的网站供我们使用。我想如果当时有人能给我传授一些网页设计的技巧,尤其是与CSS前端有关的东西应该是很有帮助的。 虽然现在我还是算不上有经验,但是我依然想以一种友好的、非正式的、非教条的方式和您分享一下CSS中伪类和伪元素的问题。 如果您是一个网页设计和开发者的老手,我想你肯定使用过伪类和伪元素。但我还是建议你去查看一下目录表,可能其中的一两项你之前没有听说过。 在开始详细讲解伪类和伪元素之前呢,我们先来了解一下基础知识:你是否想过“伪”这个字的含义?下面是字典中对这个字的介绍:

伪类在W3C上的技术定义不是特别复杂,它基本上是一个服务于CSS的虚拟的声明或者元素的一个具体特性。一些常用的伪类有:link, :visited, :hover, :active, :first-child 和 :nth-child。还有很多,我们一时看不完。
伪类通常是要以冒号开头(:),然后是伪类的名称,有时也会在括号里赋值。
现在,伪元素和真元素是一样的了,我们可以把其当做HTML中的常用元素来使用。但它并不在文件树或者dom中,这就是说我们不能对他们进行分类,只能利用CSS来创建。
 我会在文章的最后谈一下一些常见的伪元素:after;before;fisrt letter.

伪元素用单冒号还是双冒号? 把双冒号(::)引入CSS3是为了使伪元素::before,::after和类似于:hover, :active区分开来.除了IE8及以下版本,所有浏览器都支持伪元素中的双引号。 也有一些伪元素只支持双冒号,例如::backdrop 就我个人而言,我会使用单冒号标记,因为这样可以向后兼容传统浏览器;当然,如果要求使用双冒号标记,我也会在伪类中使用双冒号的。 你可以自由选择哪一种标记,没有绝对的对与错。 然而,在写这篇文章的时候,说明书要使用单冒号标记,原因就是我上面提到过的向后兼容性。 注意,新的CSS写伪元素的方法是使用双冒号的,例如:a::after{...},这样可以使他们和伪类区分开来,有时你可以在CSS中看到。但是CSS3依然允许使用单冒号的伪元素,就为了是伪类向后兼容,现在我们已然建议你坚持这种句法。 在这篇文章的标题中,支持两种冒号的伪元素会用两种方式标记出来,只支持双冒号的伪元素就以双冒号的形式呈现。 什么时候使用(不使用)生成内容呢? 生成内容是通过连接CSS特性中的content和伪元素中的:before或:after来实现的。 这个content可能是纯文本或者是一个容器,这些使我们可以通过CSS来呈现出的一个生动的模块或者装饰性的元素。这里,我指的是第一种形式----文本。 如果为了装饰而使用过多的生成内容,那些支持CSS生成内容的屏幕读者会大声读出来,这样会导致UX的效果更加糟糕。 使用CSS生成内容是为了装饰或者一些不太重要的信息,但是屏幕读者要正确使用,这样可以保证拥有辅助技术的人不会混乱。在决定是否使用CSS合成内容时要思考一下“渐进增强”(Progressive Enhancement)。 实验性伪类和伪元素 一个伪类或伪元素是实验性的是指它的规格不是固定的,它的句法和行为是可以改变的。 然而我们现在可以通过应用浏览器引擎前缀来是用伪类和伪元素。要做到这一点,我们可以参考http://caniuse.com/或者一些自动前缀的工具,例如自由前缀或者自动前缀。 在这篇文章中你会看到紧邻伪类和伪元素名称的实验性标签。 伪类 当用户执行一个动作时,状态伪类会起作用。在连接还未被浏览时,CSS中的"action"也可以写成“no action”。 让我们来看一下。 :LINK 伪类link:是链接的正常状态,通常是用来识别未被访问过的链接。在分类中的其伪类没有被识别前要生命:link,这四个的顺序是这样的:link, :visited, :hover,: active. enter image description here 如果你像下面这样使用,你就可以省略一部分。 enter image description here

Visited :Visited 这个伪类用于已经被访问过的链接。按顺序吧:visited这个软件放在第二位(放在:link之后)

enter image description here

:HOVER 当用户的指针指到时,hover用于定义元素的样式。不必把链接加到hover上,尽管这是一种常用的方法。 hover应该位于第三位(放在伪类:visited之后) enter image description here

Demo: enter image description here :ACTIVE :active这个伪类是用于定义一个被“激活”的元素或者一个指定的设备,或者一个触屏设备的按键,它可以被键盘激活,就像:foucus一样。 它的运行和:foucus 类似,不同之处在于::active是点击鼠标和松开鼠标时起作用。 它应该排在第四位,位于:hover之后

enter image description here :FOCUS 伪类:focus是用来定义一个元素的样式的,它已经从指定设备,触屏设备的界面或者键盘中获得focus,是用来很多形式元素。 或者是这样: enter image description here

BONUS CONTENT: A SASS MIXIN FOR LINKS  如果你处理过CSS中的预处理程序,比如像Sass,那么bonus content可能会引发你的兴趣。 如果你对CSS预处理程序没有兴趣---没关系---你可以直接跳转到结构性的伪类部分。 秉着使工作流程最优化的精神,下面是一个Sass mixin,我们可以创建一组基础的链接。 在mixin背后的想法是在讨论中没有声明缺省。所以,我们是被动的,去声明链接的4个阶段。 :focus 和:active通常都是一块声明的,如果你想要分开,也可以分开。注意一点:mixin是可以应用于任何HTML元素中的,而不只是links。 以下是mixin的例子: enter image description here

用法: enter image description here

编辑: enter image description here 样例: enter image description here enter image description here enter image description here enter image description here 结构性伪类: 结构性伪类以文件树或者dom 树种的传统信息为目标,它不可以用其他类型的选择器或者配合器所代替。 ::FIRST-LETTER First-letter是选择一行文本中的第一个字母,如果一个元素包含在这一行的前面,例如图片、视频或者表格,那么首字母不会受影响并且可以被选择出来。 它的这个特性可以用于段落当中,例如,无需借助图片或外部性能就增强排版的美观度。 enter image description here ::FIRST-LINE Firs-line 是用于定位元素中的第一行,它只在块级元素中起作用。 当用于段落的时候,只有第一行会有样式,即使文本会转行。 enter image description here ::SELECTION :selection 是用于定义文本中被强调出来的那部分的样式的。 enter image description here

::PLACEHOLDER :placeholder 是利用HTML中的placeholder 特性来定位用于造型元素中的占位符文本。 It can also be written as ::input-placeholder, which is actually the syntax used in CSS. 它也可以写成 ::input-placeholder,这实际上是CSS中的句法。 enter image description here

总结 CSS中的伪类和伪元素是不是很有用?他们的确给人们带来了满足感,但是这也是一个网络设计者和开发者的生活。 请确保彻底测试彻底,但是真正应用伪类和伪元素还有很长的路要走。希望你能从这篇文章中有所收获!同时不要忘记给它创建书签哦。

评论
发表评论
暂无评论
WRITTEN BY
切云微博
切云是国内专注于切图和Web前端服务的专业公司,由丰富前端经验的开发人员组成。
TA的新浪微博
PUBLISHED IN
切云!您的前端切图服务专家

切云是国内专注于切图和Web前端服务的专业公司,由丰富前端经验的开发人员组成,根据PSD编写HTML和Javascript和CSS动画的Web前端服务,我们严格控制质量,恪守对客户的交付日期,不断地向客户提交高质量服务。

切云专栏会定期给大家分享关于前端切图和前端外包的经验和最新资讯。

我的收藏