CSS核心（四十八）CSS3新增的一些列伪类选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3新增的一些列伪类选择器</title>
</head>
<style>
/* 选择的是根标签----html标签 */
:root{
background:#0f0;
}
ul li{
width:200px;
height:30px;
margin-bottom:10px;
background:#f00;
}
/* 选择第一个li */
li:first-child{
background:#00f;
}
/* 选择最后一个li */
li:last-child{
background:#ff0;
}
/* 选择第6个li */
li:nth-child(6){
background:#F0F;
}
/* 选择奇数的li元素 */
li:nth-child(even){
background:#666;
}
/* 选择偶数的li元素 */
li:nth-child(odd){
background:#fff;
}
/* 选择奇数的li元素 */
li::nth-child(2n+1){
/* 选择偶数的li元素 */
}
li:nth-child(2n){
background:#F0F;
}
/* 选择空li元素 */
li:empty{
background:#f00;
}
/* 选择仅有一个子元素的p元素 */
p:only-child{
background:#ff0;
}
/* 另外还有
first-of-type
nth-of-type
last-of-type
这里就不讲解了,如果想继续深入,大家可以网上查询它们的语法含义 */
</style>
<body>
<p>泉眼无声惜细流，树阴照水爱晴柔</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li></li>
<li>8</li>
<li>9</li>
</ul>
<div>
<p>常恐秋节至，焜黄华叶衰</p>
</div>
<p>阳春布德泽，万物生光辉</p>
</body>
</html>
显示结果如下：
大家可以把以上代码复制下来慢慢分析。
^真是厉害啊谢谢你的点悟 应该好好学习的啊 看到你经历，很受用。 写的很不错! ^看了你文章之后，顿感自己太无知了，一点都不懂……要努力学编程了……谢谢…… 没白看，我也刚开始学习编程，很有启发，也知道了一些经验，谢谢 人家的经验教训就是我们的宝贵财富志当存高远给自己提高要求就当是为了自己 收益匪浅感触颇深十分感谢你发的文章~~ 编程 a我不懂但是我正要学编程呢希望我能学的不一定有你好 但也要和你一样可可 够qiang well