万象更新 Html5 - css: selector 选择器: 伪类（pseudo class）
万象更新 Html5 - css: selector 选择器: 伪类（pseudo class）
示例如下:
css\src\selector\demo4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类（pseudo class）</title>
<!-- 引用外部样式表
<link rel="stylesheet" type="text/css" href="style.css" />
-->
<style>
* {
margin: 0;
padding: 0;
}
/*
伪类用于为类选择器添加特殊的效果
*/
/* 匹配的是根元素，即 html 元素 */
:root { font-size: 18px; }
/* 未访问的链接 */
.mya:link { color: red }
/* 访问过的链接 */
.mya:visited { color: green }
/* 鼠标移动到链接上 */
.mya:hover { color: blue }
/* 鼠标在链接上按下 */
.mya:active { color: orange }
/* 可获取焦点元素获取到了焦点 */
.mya:focus { color: purple }
/* 匹配的是 div 的 lang 属性值为 abc 的元素 */
div:lang(abc) { color: green; }
/* 寻找 .c1 的儿子辈的第 1 个元素，如果其是 div 元素则匹配 */
.c1 div:first-child { color: red; }
/* 寻找 .c2 的儿子辈的倒数第 1 个元素，如果其是 div 元素则匹配 */
.c2 div:last-child { color: red; }
/* 匹配 .c3 的儿子辈的所有 div 元素中的第 1 个 */
.c3 div:first-of-type { color: red; }
/* 匹配 .c4 的儿子辈的所有 div 元素中的倒数第 1 个 */
.c4 div:last-of-type { color: red; }
/*
下面这几个伪类都有个参数，此参数说明如下：
1、一个 1...n 的整型值：1 代表第 1 个子元素
2、类似 3x + 1 的值，其中的 x 会从 0...n 取值，所以其代表第 1, 4, 7... 个子元素
3、odd - 匹配奇数位置的子元素，即第 1, 3, 5... 个元素
4、even - 匹配偶数位置的子元素，即第 2, 4, 6... 个元素
*/
/* 寻找 .c5 的儿子辈的第 2 个元素，如果其是 div 元素则匹配 */
.c5 div:nth-child(2) { color: red; }
/* 寻找 .c6 的儿子辈的倒数第 2 个元素，如果其是 div 元素则匹配 */
.c6 div:nth-last-child(2) { color: red; }
/* 匹配 .c7 的儿子辈的所有 div 元素中的第 2 个 */
.c7 div:nth-of-type(2) { color: red; }
/* 匹配 .c8 的儿子辈的所有 div 元素中的倒数第 2 个 */
.c8 div:nth-last-of-type(2) { color: red; }
/* 如果 .c9 的儿子辈只有一个元素，且这个元素是 div 元素，则匹配 */
.c9 div:only-child { color: red; }
/* 如果 .c10 的儿子辈的所有元素中只有一个 div 元素，则匹配 */
.c10 div:only-of-type { color: red; }
/* 如果 .c11 中的 div 没有任何子元素，则匹配 */
.c11 div:empty { width: 100px; height: 20px; background-color: red }
/* 匹配 .c12 中的非 span 类型的元素。注：not(selector) 的参数是一个 css 选择器，比如 not([type="submit"]) 等都是可以的 */
.c12 :not(span) { color: red }
/* 匹配 .c13 中的所有 enabled 状态的元素 */
.c13 :enabled { color: red }
/* 匹配 .c13 中的所有 disabled 状态的元素 */
.c13 :disabled { color: green }
/* 匹配 .c13 中的所有 checked 状态的元素 */
.c13 :checked { width: 50px; height: 50px }
</style>
</head>
<body>
<div>
<a href="http://webabcd.cnblogs.com" target="_blank" class="mya">webabcd.cnblogs.com</a>
</div>
<br />
<div lang="abc">webabcd</div>
<br />
<div class="c1">
<div>abc</div>
<div>xyz</div>
</div>
<br />
<div class="c2">
<div>abc</div>
<div>xyz</div>
</div>
<br />
<div class="c3">
<div>abc</div>
<div>xyz</div>
</div>
<br />
<div class="c4">
<div>abc</div>
<div>xyz</div>
</div>
<br />
<div class="c5">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>
<br />
<div class="c6">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>
<br />
<div class="c7">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>
<br />
<div class="c8">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>
<br />
<div class="c9">
<div>aaa</div>
</div>
<br />
<div class="c10">
<div>aaa</div>
</div>
<br />
<div class="c11">
<div></div>
<div>bbb</div>
</div>
<br />
<div class="c12">
<span>aaa</span>
<div>bbb</div>
<span>ccc</span>
</div>
<br />
<div class="c13">
<button>aaa</button>
<button disabled>bbb</button>
<input type="checkbox" checked />
</div>
<br />
</body>
</html>
