400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

css3新增伪类选择器是什么

本篇内容介绍了“css3新增伪类选择器是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

专注于为中小企业提供成都网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业罗城免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

新增伪类选择器有:1、“:root”,匹配文档的根元素;2、“:first-child”,匹配父元素的第一个子元素;3、“:last-child”,匹配父元素的最后一个子元素;4、“:empty”,匹配空元素;5、“:target”等等。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类:

1、结构性伪类选择器

对于:nth-child和:nth-last-child两个伪类选择器,还支持如下用法。

:nth-child(odd/event):匹配符合选择器,且必须是其父元素的第奇数个/偶数个子节点的元素

:nth-last-child(odd/event):匹配符合选择器,且必须是其父元素的第奇数个/偶数个子节点的元素

:nth-child(xn y):匹配符合选择器,且必须是其父元素的第xn y个子节点的元素

:nth-last-child(xn y):匹配符合选择器,且必须是其父元素的第xn y个子节点的元素

使用:nth-last-child伪类选择器的示例如下:


    
    
     child 
    
        /* 定义对作为其父元素的倒数第3n 1个(1、4、7)子节点
            的li元素起作用的CSS样式 */
        li:nth-last-child(3n+1) {
           background-color: #FFC0CB;
        }
    


        Java     轻量级Java EE     Ajax     XML     经典Java EE     Android

其效果如下:

css3新增伪类选择器是什么

2、UI元素状态伪类选择器

UI元素状态伪类选择器包含有:

3、其他伪类选择器

3.1:target伪类选择器(匹配符合选择器且必须是命名锚点目标的元素)

要求元素必须是命名锚点的目标,且必须是当前正在访问的目标。它的作用是页面可通过该选择器高亮显示正在被访问的目标。下面示范了:target选择器的用法(该代码为《疯狂HTML 5 CSS 3 JavaScript讲义》中的示例代码)


	
	 :target 
	
		:target {
			background-color: #ff0;
		}
	


	
		疯狂Java讲义 |
		轻量级Java EE企业应用实战 |
		疯狂Android讲义 |
		经典Java EE企业应用实战
	

疯狂Java讲义

本书详细介绍了Java语言各方面的内容。

轻量级Java EE企业应用实战

本书详细介绍Struts 2、Spring 3、Hibernate三个框架整合开发的知识

疯狂Android讲义

本书详细介绍了Android应用开发的知识。

经典Java EE企业应用实战

本书详细介绍JSF 、EJB 3、JPA等Java EE相关的知识

css3新增伪类选择器是什么

3.2:not伪类选择器(匹配符合1选择器但不符合2选择器的元素,相当于用1减去2)

下面页面代码示范了:not选择器的用法:


	
	 :not 
	
		li:not(#ajax) {
			color: #999;
			font-weight: bold;
		}
	


	
    疯狂Java讲义 轻量级Java EE企业应用实战 疯狂Ajax讲义 疯狂XML讲义 疯狂Android讲义

css3新增伪类选择器是什么

从运行结果可以看到,除了id为ajax的所有元素字体设置为#999表示的颜色,且字体加粗显示。

“css3新增伪类选择器是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


当前标题:css3新增伪类选择器是什么
转载来于:http://mbwzsj.com/article/jgccio.html
  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务