图文讲解伪选择器详解

北京正规青春痘医院 http://pf.39.net/bdfyy/bjzkbdfyy/210312/8740638.html

本节是第三讲的第四小节,本节继续为大家介绍选择器,一种名字听上去很特别的选择器-伪选择器(PseudoSelector)。伪选择器包括两类:一类是伪类,另一类是伪元素。

伪类(Pseudo-classes)

用于选择处于特定状态的元素,行为就像您在文档的某个部分上应用了一个类,通常可以帮助您减少标记中多余的类。伪类是以冒号开头的关键字,例如:

:伪类名

标签a相关伪类

a:link-未访问过的链接,a:visited-已访问过的链接,a:hover-鼠标移到该元素上时,a:active-鼠标点击该元素时。

表单相关伪类

:checked任何处于选中状态的radio(inputtype=radio),checkbox(inputtype=checkbox)或(select)元素中的optionHTML元素(option)。

:disabled表示任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。

:enabled表示任何启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入)或获取焦点,则该元素是启用的。

:focus表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的“tab”键选择它时会被触发。

:invalid表示任意内容未通过验证的input或其他form元素。

:valid表示内容验证正确的input或其他form元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。

:required表示任意input元素表示任意拥有required属性的input或textarea元素使用它.它允许表单在提交之前容易的展示必填字段并且渲染其外观。

:optional表示任意没有required属性的input,select或textarea元素使用它。

元素相关伪类

:empty代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格)。注释或处理指令都不会产生影响。

:first-child表示在一组兄弟元素中的第一个元素。

:first-of-type表示一组兄弟元素中其类型的第一个元素。

:lang()基于元素语言来匹配页面元素。

:last-child代表父元素的最后一个子元素。

:last-of-type表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。

:not()用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negationpseudo-class)。

:nth-child(an+b)首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)。

:nth-last-child(an+b)从兄弟节点中从后往前匹配处于某些位置的元素,这个伪类和:nth-child基本一致,但它是从结尾计数,而不是从开始计数。

:nth-of-type(an+b)针对具有一组兄弟节点的标签,用n来筛选出在一组兄弟节点的位置。

:nth-last-of-type(an+b)匹配那些在它之后有an+b-1个相同类型兄弟节点的元素,其中n为正值或零值。它基本上和:nth-of-type一样,只是它从结尾处反序计数,而不是从开头处。

:only-child匹配没有任何兄弟元素的元素,等效的选择器还可以写成:first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点。

:only-of-type代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。

:root匹配文档树的根元素。对于HTML来说,:root表示html元素,除了优先级更高之外,与html选择器相同。

:target代表一个唯一的页面元素(目标元素),其id与当前URL片段匹配。

伪元素(Pseudo-elements)

与元素的行为类似,它们的作用就像您在标记中添加了一个全新的HTML元素一样。伪元素以双冒号开头,例如:

::伪元素名

::after用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

::before创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

::first-line在某block-levelelement(块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。

::first-letter会选中某block-levelelement(块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格)。

通是过伪类和伪元素的讲解,到目前为止,已经为大家介绍完了所有的选择器,接下来有个重要的问题,那就是各个选择器的优先级到底如何排列,也就是说有多个选择器同时作用在同一个元素上时,最终浏览器显示的效果如何。在这里我通过实验的方法把所有的选择器的优先级进行了比较,最终得出得结论是,优先级由低到高:通用选择器(*)、元素选择器、类选择器、属性选择器、ID选择器、伪选择器、内联样式。需要说明得是,我的这个结论与很多资料的结论不同,很多资料认为,类选择器、属性选择器、伪选择器的优先级相同,但是真实的实验结论并非如此,详情可以参考咱们的视频课程实例。以下是实例截图:

以上内容部分摘自视频课程03网页前端CSS-4CSS伪选择器。最后,病毒在国外已经大范围蔓延,希望全球的人们都能避免感染,疫情早日结束。中国加油!世界加油!




转载请注明:http://www.aierlanlan.com/rzdk/2863.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了