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表示的颜色，且字体加粗显示。
CSS3新增的伪类选择器的更多相关文章
- CSS3的一个伪类选择器:nth-child()
CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...
- CSS3中的伪类选择器详解
类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...
- 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...
- 【CSS3】---结构性伪类选择器-first-child+last-child
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
- css3系列之伪类选择器
Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:n ...
- css3中的伪类选择器
一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...
- css3 UI元素状态伪类选择器
选择器 说明 例子/备注 E:hover 当鼠标移到元素上元素所使用的样式 :hover{}或input:[type="text"]:hover{} E:active 当元素被激活 ...
- CSS3中结构伪类选择器——root、not、empty、target选择器
1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...
随机推荐
- Python3之XML模块
一.简介 xml是实现不同语言或程序之间进行数据交换的协议,可扩展标记语言,标准通用标记语言的子集.是一种用于标记电子文件使其具有结构性的标记语言.xml格式如下,是通过<>节点来区别数据 ...
- SLAM技术在国内的发展现状
近年来,由于扫地机的出现使得SLAM技术名声大噪,如今,已在机器人.无人机.AVG等领域相继出现它的身影,今天就来跟大家聊一聊国内SLAM的发展现状. SLAM的多领域应用 SLAM应用领域广泛,按其 ...
- 按钮重复点击问题 UIbutton
.h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...
- Servlet记录
[Servlet]java语言编写动态资源的开发技术,普通的java类 [转发与重定向的区别] 转发在服务器端完成的:重定向是在客户端完成的 转发的速度快:重定向速度慢 转发的是同一次请求:重定向是两 ...
- 在pycharm中使用指定的虚拟环境virtualenv
第一步 建立虚拟环境 cmd下: pip install virtualenv 创建虚拟环境目录 env 第二步:激活虚拟环境 进入虚拟环境下的script目录 第三步:创建一个flask文件夹并打开 ...
- Android配置横屏资源与Activity生命周期
屏幕旋转会改变设备配置(device configguration).设备设置的特征有:屏幕方向.屏幕像素密度.屏幕尺寸.键盘类型.底座模式以及语言等. 当屏幕发现旋转时(设备配置更改),And ...
- 制作支持UEFI启动的原装系统安装盘
目前市面上大多数的计算机主板均支持UEFI,而且默认就是UEFI,会让新手安装系统遇到各种问题,最常见的就是找不到硬盘,通过光盘来安装操作系统,固然不会遇到什么问题,但是现在主流手段都是通过U盘来安装 ...
- C# DictionaryHelper
1 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System ...
- eclipse 安装 scala
1.官网下载地址 http://scala-ide.org/download/current.html 目前最新的版本 http://download.scala-ide.org/sdk/lithiu ...
- iView 初识
iView和element-UI在table这块有有相似之处,但是与layui有不同的地方 在data数据这里有明显的不同,在iView中data数组下每个元素对象对应一行的数据:而layui中,da ...