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 ...
随机推荐
- 跟我一起读postgresql源码(三)——Rewrite(查询重写模块)
上一篇博文我们阅读了postgresql中查询分析模块的源码.查询分析模块对前台送来的命令进行词法分析.语法分析和语义分析后获得对应的查询树(Query).在获得查询树之后,程序开始对查询树进行查询重 ...
- [SCOI2009]windy数 BZOJ1026 数位dp
题目描述 windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数? 输入输出格式 输 ...
- IO模型之三Reactor 和 Proactor IO设计模式
反应器Reactor: 在事件驱动的应用中,应用中的请求总是通过事件(如CONNECTOR.READ.WRITE等)来表示,当多个请求同时到来时,这些请求最终还是会被序列化地处理,在序列化处理这些服务 ...
- JUC包下CountDownLatch学习笔记
CountDownLatch的作用是能使用多个线程进来之后,且线程任务执行完毕之后,才执行, 闭锁(Latch):一种同步方法,可以延迟线程的进度直到线程到达某个终点状态.通俗的讲就是,一个闭锁相当于 ...
- UML类图和时序图符号
看懂UML类图和时序图 https://www.cnblogs.com/me115/p/4092632.html 内容目录: 从一个示例开始 类之间的关系 时序图 附录:<图说设计模式> ...
- 关于Manjaro与Ubuntu双系统并存引发的一个boot问题
事情发生在写下这篇博客的半小时前.笔者的电脑本身是Manjaro+win10双系统并存,因为一些原因要安装ubuntu. 装完ubuntu用了一阵子,想切回manjaro,于是遇到了这个问题. 看到k ...
- C++_异常4-将对象用作异常类型
通常,引发异常的函数将传递一个对象.这样做的重要优点之一就是,可以利用不同的异常类型来区分不同的函数在不同的情况下引发的异常. 对象可以携带信息,程序员可以根据这些信息来确定异常的原因. 同时,cat ...
- Loj 6432. 「PKUSC2018」真实排名 （组合数）
题面 Loj 题解 枚举每一个点 分两种情况 翻倍or不翻倍 \(1.\)如果这个点\(i\)翻倍, 要保持排名不变,哪些必须翻倍,哪些可以翻倍? 必须翻倍: \(a[i] \leq a[x] < ...
- c# post get
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- HDU - 1300 简单DP
题意:买珠子的方案有两种,要么单独买,价钱为该种类数量+10乘上相应价格,要么多个种类的数量相加再+10乘上相应最高贵的价格买 坑点:排序会WA,喵喵喵? 为什么连续取就是dp的可行方案?我猜的.. ...