<!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>
显示结果如下：
大家可以把以上代码复制下来慢慢分析。
|
窥视卡
雷达卡
发表于 2023-2-1 18:52:09
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 02:30:16
