首页 > 网站建设 >

网站建设有哪些CSS3结构性伪类选择器?

发布时间:2019-10-24 作者:网站建设

  网站建设公司浅谈有哪些CSS3结构性伪类选择器?CSS3中新添加了很多新的选择器,使用这些选择器可以更准确、更方便地定位HTML页面中的元素。
  结构性伪类选择器与类选择器有很大的不同,它不需要用户指定元素的类名,而是由CSS提供选择器名称,从而快速定位指定的元素。在CSS3中,结构性伪类选择器还可以细分为以下几种:
1.伪元素选择器
  伪元素选择器主要应用于指定名称的元素上,不需要用户单独为其设置选择器名称,而是使用CSS3中已经定义的选择器名称,这类选择器主要包括以下4种。
(1)first-line伪元素选择器:为元素中第一行的文字应用样式。
(2)first-letter伪元素选择器:为元素中第一个字母或文字应用样式。
(3)before伪元素选择器:在指定元素之前插入一些内容。
(4)after伪元素选择器:在指定元素之后插入一些内容。
2.root选择器
  root选择器用于设置页面根元素的样式。在HTML页面中,根元素就是位于最顶层结构的<html>元素。
3.not选择器
  HTML页面中的各种元素都是嵌套在一起使用的,当用户为上一级元素设置样式后,由于样式的继承特性,被嵌套的元素会具有相同的样式。为了能够排除嵌套元素中某些不使用继承样式的元素,可以使用not选择器将其排除。
4.empty选择器
  如果要为HTML页面中所有内容为空的元素设置样式,需要使用JavaScript获取所有内容为空的元素,然后为其设置样式。但是在CSS3中,可以直接使用empty选择器很方便地完成这个功能。
5.target选择器
  target选择器用于指定页面中某个元素的样式。在使用target选择器时,需要根据元素的id属性指定样式,而元素的id又被当做页面中的超链接来使用,这样target选择器的样式才能起作用。
6.first-child和last-child选择器
  在使用列表时,有时需要为第一个列表项和最后一个列表项使用不同的样式,为了定位这两个元素,就需要为它们设置不同的id属性。然而在CSS3中,可以省略id属性,直接使用first-child和last-child选择器定位这两个元素。
7.first-of-type和last-of-type选择器
  在使用first-child和last-child选择器时,如果相同层级中有多种元素,我们只能设置第一种元素和最后一种元素的样式,不能设置第一个和最后一个相同元素的样式。为了满足这样的需求,可以使用first-of-type和last-of-type选择器定位相同类型的第一个元素和最后一个元素。深圳网站建设公司本文关于“网站建设有哪些CSS3结构性伪类选择器?”的知识就介绍分享到这里,谢谢关注,博纳网络编辑整理。
文章标题:网站建设有哪些CSS3结构性伪类选择器?
本文地址:https://www.198bona.com/news/4393.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯