css3新增伪类选择器有哪些

青灯夜游

发布时间：2022-04-25 15:14:47

3559人浏览过

来源于php中文网

原创

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

css3新增伪类选择器有哪些

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

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

结构性伪类选择器
UI元素状态伪类选择器
其他伪类选择器

1、结构性伪类选择器

:root：匹配文档的根元素。在HTML文档中，根元素永远是元素。
:first-child：匹配符合选择器，且必须是其父元素的第一个子节点的元素。
:last-child：匹配符合选择器，且必须是其父元素的最后一个子节点的元素。
:nth-child(n)：匹配符合选择器，且必须是其父元素的第n个子节点的元素。
:nth-last-child(n)：匹配符合选择器，且必须是其父元素的倒数第n个子节点的元素。
:only-child：匹配符合选择器，且必须是其父元素的唯一子节点的元素。
:first-of-type：匹配符合选择器，且是与它同类型、同级的兄弟元素中的第一个元素。
:last-of-type：匹配符合选择器，且是与它同类型、同级的兄弟元素中的最后一个元素。
:nth-of-type(n)：匹配符合选择器，且是与它同类型、同级的兄弟元素中的第n个元素。
:nth-last-of-type(n)：匹配符合选择器，且是与它同类型、同级的兄弟元素中的倒数第n个元素
:only-of-type：匹配符合选择器，且是与它同类型、同级的兄弟元素中的唯一一个元素。
:empty：匹配符合选择器，且其内部没有任何子元素（包括文本节点）的元素。
:lang(lang)：匹配符合选择器，且内容是特定语言的元素。

对于：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 
    



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

其效果如下：

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

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

:enabled：匹配所有用户界面（form表单）中处于可用状态的元素
:disabled：匹配所有用户界面（form表单）中处于不可用状态的元素

魔法映像企业网站管理系统
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作

下载
:checked：匹配所有用户界面（form表单）中处于选中状态的元素
::selection(该选择器前面有两个冒号)：匹配元素中被用户选中或处于高亮状态的部分

3、其他伪类选择器

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

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

:target

疯狂Java讲义

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

轻量级Java EE企业应用实战

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

疯狂Android讲义

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

经典Java EE企业应用实战

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

3.2：not伪类选择器（匹配符合1选择器但不符合2选择器的元素，相当于用1减去2）

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


	
	 :not 
	


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

从运行结果可以看到，除了id为ajax的所有

元素字体设置为#999表示的颜色，且字体加粗显示。

（学习视频分享：css视频教程、web前端）

css3中有哪些渐变属性

有哪些css3新特性

flex弹性布局是什么

前端如何规避重绘和回流

css3不撑开

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

553

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

477

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

394

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

551

2023.09.20