最全的css3伪类和伪元素详解

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

最全的css3伪类和伪元素详解_第1张图片

如果您是一个网页设计和开发者的老手,我想你肯定使用过伪类和伪元素。但我还是建议你去查看一下目录表,可能其中的一两项你之前没有听说过。

伪类在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.Visited

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

:HOVER

当用户的指针指到时,hover用于定义元素的样式。不必把链接加到hover上,尽管这是一种常用的方法。

hover应该位于第三位(放在伪类:visited之后)

:ACTIVE

:active这个伪类是用于定义一个被“激活”的元素或者一个指定的设备,或者一个触屏设备的按键,它可以被键盘激活,就像:foucus一样。

它的运行和:foucus 类似,不同之处在于::active是点击鼠标和松开鼠标时起作用。

它应该排在第四位,位于:hover之后

:FOCUS

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

BONUS CONTENT: A SASS MIXIN FOR LINKS

如果你处理过CSS中的预处理程序,比如像Sass,那么bonus content可能会引发你的兴趣。

如果你对CSS预处理程序没有兴趣---没关系---你可以直接跳转到结构性的伪类部分。

秉着使工作流程最优化的精神,下面是一个Sass mixin,我们可以创建一组基础的链接。

在mixin背后的想法是在讨论中没有声明缺省。所以,我们是被动的,去声明链接的4个阶段。

:focus 和:active通常都是一块声明的,如果你想要分开,也可以分开。注意一点:mixin是可以应用于任何HTML元素中的,而不只是links。

结构性伪类:

结构性伪类以文件树或者dom 树种的传统信息为目标,它不可以用其他类型的选择器或者配合器所代替。

::FIRST-LETTER

First-letter是选择一行文本中的第一个字母,如果一个元素包含在这一行的前面,例如图片、视频或者表格,那么首字母不会受影响并且可以被选择出来。

它的这个特性可以用于段落当中,例如,无需借助图片或外部性能就增强排版的美观度。

::FIRST-LINE

Firs-line 是用于定位元素中的第一行,它只在块级元素中起作用。

当用于段落的时候,只有第一行会有样式,即使文本会转行。

::SELECTION

:selection 是用于定义文本中被强调出来的那部分的样式的。

::PLACEHOLDER

:placeholder 是利用HTML中的placeholder 特性来定位用于造型元素中的占位符文本。

It can also be written as ::input-placeholder, which is actually the syntax used in CSS.

它也可以写成 ::input-placeholder,这实际上是CSS中的句法。

总结

CSS中的伪类和伪元素是不是很有用?他们的确给人们带来了满足感,但是这也是一个网络设计者和开发者的生活。

请确保彻底测试彻底,但是真正应用伪类和伪元素还有很长的路要走。希望你能从这篇文章中有所收获!同时不要忘记给它创建书签哦。

----

文/切版网(www.qieban.cn)

转载于:https://my.oschina.net/u/3529908/blog/920561

你可能感兴趣的:(最全的css3伪类和伪元素详解)