CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类:
- 结构性伪类选择器
- UI元素状态伪类选择器
- 其他伪类选择器
1、结构性伪类选择器
- Selector:root:匹配文档的根元素。在HTML文档中,根元素永远是<html.../>元素。
- Selector:first-child:匹配符合Selector选择器,且必须是其父元素的第一个子节点的元素。
- Selector:last-child:匹配符合Selector选择器,且必须是其父元素的最后一个子节点的元素。
- Selector:nth-child(n):匹配符合Selector选择器,且必须是其父元素的第n个子节点的元素。
- Selector:nth-last-child(n):匹配符合Selector选择器,且必须是其父元素的倒数第n个子节点的元素。
- Selector:only-child:匹配符合Selector选择器,且必须是其父元素的唯一子节点的元素。
- Selector:first-of-type:匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的第一个元素。
- Selector:last-of-type:匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的最后一个元素。
- Selector:nth-of-type(n):匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的第n个元素。
- Selector:nth-last-of-type(n):匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的倒数第n个元素
- Selector:only-of-type:匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的唯一一个元素。
- Selector:empty:匹配符合Selector选择器,且其内部没有任何子元素(包括文本节点)的元素。
- Selector:lang(lang):匹配符合Selector选择器,且内容是特定语言的元素。
对于:nth-child和:nth-last-child两个伪类选择器,还支持如下用法。
Selector:nth-child(odd/event):匹配符合Selector选择器,且必须是其父元素的第奇数个/偶数个子节点的元素
Selector:nth-last-child(odd/event):匹配符合Selector选择器,且必须是其父元素的第奇数个/偶数个子节点的元素
Selector:nth-child(xn y):匹配符合Selector选择器,且必须是其父元素的第xn y个子节点的元素
Selector:nth-last-child(xn y):匹配符合Selector选择器,且必须是其父元素的第xn y个子节点的元素
使用:nth-last-child伪类选择器的示例如下:
<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> child </title><style type="text/css">/* 定义对作为其父元素的倒数第3n 1个(1、4、7)子节点的li元素起作用的CSS样式 */li:nth-last-child(3n 1) {border: 1px solid black;}</style>
</head>
<body>
<ul><li id="java">Java</li><li id="javaee">轻量级Java EE</li><li id="ajax">Ajax</li><li id="xml">XML</li><li id="ejb">经典Java EE</li><li id="android">Android</li>
</ul>
</body>
其效果如下:
2、UI元素状态伪类选择器
UI元素状态伪类选择器包含有:Selector:link、Selector:visited、Selector:active、Selector:hover、Selector:focus、Selector:enabled、Selector:disabled、Selector:checked、Selector:default、Selector:indeterminate、Selector:read-only、Selector:read-write、Selector:required、Selector:optional、Selector:valid、Selector:invalid、Selector:in-range、Selector:out-of-range、Selector::selection(该选择器前面有两个冒号)。
3、其他伪类选择器
3.1:target伪类选择器(匹配符合Selector选择器且必须是命名锚点目标的元素)
要求元素必须是命名锚点的目标,且必须是当前正在访问的目标。它的作用是页面可通过该选择器高亮显示正在被访问的目标。下面示范了:target选择器的用法(该代码为《疯狂HTML 5 CSS 3 JavaScript讲义》中的示例代码)
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> :target </title><style type="text/css">:target{background-color: #ff0;}</style>
</head>
<body>
<p id="menu">
<a href="#java">疯狂Java讲义</a> |
<a href="#ee">轻量级Java EE企业应用实战</a> |
<a href="#android">疯狂Android讲义</a> |
<a href="#ejb">经典Java EE企业应用实战</a>
</p>
<div id="java">
<h2>疯狂Java讲义</h2>
<p>本书详细介绍了Java语言各方面的内容。</p>
</div>
<div id="ee">
<h2>轻量级Java EE企业应用实战</h2>
<p>本书详细介绍Struts 2、Spring 3、Hibernate三个框架整合开发的知识</p>
</div>
<div id="android">
<h2>疯狂Android讲义</h2>
<p>本书详细介绍了Android应用开发的知识。</p>
</div>
<div id="ejb">
<h2>经典Java EE企业应用实战</h2>
<p>本书详细介绍JSF 、EJB 3、JPA等Java EE相关的知识</p>
</div>
</body>
下面显示的是点击了“疯狂Java讲义”链接后显示的效果
3.2:not伪类选择器(匹配符合Selector1选择器但不符合Selector2选择器的元素,相当于用Selector1减去Selector2)
下面页面代码示范了:not选择器的用法:
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> :not </title><style type="text/css">li:not(#ajax) {color: #999;font-weight: bold;}</style>
</head>
<body>
<ul><li id="java">疯狂Java讲义</li><li id="javaee">轻量级Java EE企业应用实战</li><li id="ajax">疯狂Ajax讲义</li><li id="xml">疯狂XML讲义</li><li id="android">疯狂Android讲义</li>
</ul>
</body>
从运行结果可以看到,除了id为ajax的所有<li.../>元素字体设置为#999表示的颜色,且字体加粗显示。
更多专业前端知识,请上 【猿2048】www.mk2048.com
CSS3新增的伪类选择器相关推荐
- html5新增的伪类选择器有,CSS3新增了哪些选择器?(属性、结构伪类、伪元素选择器)...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
- html伪类选择器代码,CSS3中结构性伪类选择器—:first-of-type实现名言标签(代码实例 )...
本文目标: 1.掌握CSS中结构性伪类选择器-nth-child的用法 问题: 1.实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器-first-of-type 附加说明: 1.整体宽为 ...
- html新增伪类,CSS3新增的伪类有哪些 与 居中div的多种方法
CSS3新增伪类有那些? p:first-of-type:选择属于其父元素的首个 元素 p:last-of-type:选择属于其父元素的最后 元素 p:only-of-type:属于父元素的特定类型的 ...
- 黑马程序员pink老师前端h5(html5)+css3(16)P94-P104伪类选择器上并集选择器子选择器后代选择器emmet语法生成标签快速格式化代码复合选择器简介
P94-emmet语法生成标签 Emmet语法 Zen codig他使用缩写,来提高htmlcss编写速度 div+p div class="nav" div id="b ...
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- CSS伪类选择器使用实例
今天的小技巧主要是搞明白了CSS3新增的伪类选择器,并和之前的伪类选择器做比较~~~ 每一次看伪类选择器的介绍总有一种语文没学好的感觉,so只能上实例理解了~ 这次主要学习了 :first-of-ty ...
- CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式
转自爱设计 原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为 ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁. 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-chi ...
最新文章
- springboot+shiro使用权限注解问题_无法使用注解_使用注解无法跳转无权限页面
- debian,ubuntu下安装MariaDB,并设置密码,修改端口,允许外网访问
- crontab 案例
- MSD3458开发资料
- 【控制】《复杂运动体系统的分布式协同控制与优化》-方浩老师-第11章-意图场模型干预下的人机共享控制
- python append 浮点数 精度_Python打牢基础,从12个语法开始!
- java 编译引入库_eclipse编译cpp文件,并且引用其他预编译的库
- javascript boolean/布尔表达式
- oracle权限的分配
- 面向对象编程 和 面向接口编程
- Mac小白入门小技巧
- JavaScript 教程
- 案例研究:FIT2CLOUD 飞致云携手联友科技助力东风日产云管平台建设
- MeasureSpec详解
- word批量导入试题,一键组卷,单机软件题库管家迎来1.2版本
- 7-5 单词首字母大写 (15分)
- 湖人詹姆斯 戴维斯 拉塞尔三人合体就赢!
- 手机ftp服务器进入制定文件夹,ftp服务器 指定文件夹
- 乔布斯的创新之道:换一种思考方式
- java 的 exe脱壳_[已解决]求教如何使用java编写加壳程序对PE文件进行加壳