首页 > 代码库 > 第十三章 CSS选择器（下）
第十三章 CSS选择器（下）
第 13章 CSS选择器[下]
学习要点：
1.伪类选择器总汇
2.结构性伪类选择器
3.UI伪类选择器
4.动态伪类选择器
5.其他伪类选择器
本章主要探讨 HTML5中 CSS选择器中的伪类选择器，和伪元素选择器一样，面向某种共同特征来选择元素。
一．伪类选择器总汇
伪类选择器分为四种类型：结构性伪类、UI伪类、动态伪类和其他伪类选择器
二．结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。
1.根元素选择器
:root {
border: 1px solid red;
}
解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。
2.子元素选择器
ul > li:first-child {
color: red;
}
解释：选择第一个子元素。
ul > li:last-child {
color: red;
}
解释：选择最后一个子元素。
ul > li:only-child {
color: red;
}
解释：选择只有一个子元素的那个子元素。
div > p:only-of-type {
color: red;
}
解释：选择只有一个指定类型的子元素的那个子元素。
3.:nth-child(n)系列
ul > li:nth-child(2) {
color: red;
}
解释：选择子元素的第二个元素。
ul > li:nth-last-child(2) {
color: red;
}
解释：选择子元素倒数第二个元素。
div > p:nth-of-type(2) {
color: red;
};
解释：选择特定子元素的第二个元素。
div > p:nth-last-of-type(2) {
color: red;
};
解释：选择特定子元素的倒数第二个元素。
二．UI伪类选择器
UI伪类选择器是根据元素的状态匹配元素。
1.:enabled
:enabled {
border: 1px solid red;
}
解释：选择启用状态的元素。
2.:disabled
:disabled {
border: 1px solid red;
}
解释：选择禁用状态的元素。
3.:checked
:checked {
display: none;
}
解释：选择勾选的 input元素。
4.:default
:default {
display: none;
}
解释：从一组类似的元素中选择默认元素。比如 input被勾选的即默认的。
5.:valid和:invalid
input:valid {
border: 1px solid blue;
}
input:invalid {
border: 1px solid green;
}
解释：输入验证合法与不合法显示时选择的元素。
6.:required和:optional
input:required {
border: 1px solid blue;
}
input:optional {
border: 1px solid green;
}
解释：根据是否具有 required属性选择元素。
三．动态伪类选择器
动态伪类选择器根据条件的改变匹配元素。
1.:link和 visited
a:link {
color: red;
}
a:visited {
color: orange;
}
解释：:link表示未访问过的超链接，:visited表示已访问过的超链接。
2.:hover
a:hover {
color: blue;
}
解释：表示鼠标悬停在超链接上。
3.:active
a:active {
color: green;
}
解释：表示鼠标按下激活超链接时。
4.:focus
input:focus {
border: 1px solid red;
}
解释：表示获得焦点时。
四．其他伪类选择器
1.:not
a:not([href*="baidu"]) {
color: red;
}
解释：否定选择器，反选。
2.:empty
:empty {
display: none;
}
解释：匹配没有任何内容的元素。
3.:lang
:lang(en) {
color: red;
}
解释：选择包含 lang属性，属性值前缀为 en的元素。和属性选择器匹配结果一致。
4.:target
:target {
color: red;
}
解释：定位到锚点时，选择此元素。
5.::selection
::selection {
color: red;
}
解释：这是一个伪元素选择器，当选择文字时触发选择。CSS3版本下的选择器。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS选择器[下]</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css">
</head>
<body>
<ul>
<li>我是儿子</li>
<li>我是儿子</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>
<ul>
<li>我是儿子</li>
</ul>
<div>
<p>我是段落</p>
<span>我不是段落</span>
</div>
<div>
<p>我是段落</p>
<p>我是段落</p>
</div>
<form>
<input type="text" required>
<input type="email">
<input type="checkbox">
<input type="checkbox" checked>
<button>提交</button>
</form>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.google.com">谷歌</a>
<a href="http://www.haosou.com">好搜</a>
<b>加粗</b>
<p lang="en-us">HTML5</p>
<b id="mytarget">加粗</b>
</body>
</html>
@charset "utf-8";
/*:root {
border: 1px solid red;
}*/
/*ul > li {
color: red;
}*/
/*ul > li:first-child {
color: red;
}*/
/*li:first-child {
color: red;
}*/
/*:first-child {
color: red;
}*/
/*伪类都需要加上前置选择器来限制范围*/
/*ul > li:last-child {
color: red;
}*/
/*ul > li:only-child {
color: red;
}*/
/*div > p:only-child {
color: red;
}*/
/*div > p:only-of-type {
color: red;
}*/
/*ul > li:nth-child(2) {
color: red;
}*/
/*ul > li:nth-last-child(2) {
color: red;
}*/
/*div > p:nth-of-type(2) {
color: red;
}*/
/*div > p:nth-last-of-type(1) {
color: red;
}*/
/*input:enabled {
border: 1px solid red;
}
input:disabled {
border: 1px solid blue;
}*/
/*input:checked {
display: none;
}*/
/*input:default {
display: none;
}*/
/*input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}*/
/*input:required {
border: 1px solid red;
}
input:optional {
border: 1px solid blue;
}*/
/*a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: orange;
}
a:active {
color: green;
}*/
/*input:focus {
border: 1px solid red;
}*/
/*a:not([href*="baidu"]) {
color: red;
}*/
/*p:empty {
display:none;
}*/
/*p:lang(en) {
color: red;
}*/
b:target {
color: red;
}
::selection {
color: red;
}
第十三章 CSS选择器（下）