首页 > 代码库 > CSS3新增加的伪类选择器
CSS3新增加的伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3新增加的伪类选择器</title>
<style type="text/css">
/*root所有的元素*/
:root{
color: pink;
}
li:first-child{
color: red;
}
li:last-child{
color: green;
}
/*顺数第二个*/
li:nth-child(2){
color:blue;
}
/*倒数第一个*/
li:nth-last-child(1){
color: silver;
}
</style>
</head>
<body>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<ul>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
<ul>
<li>GGG</li>
</ul>
</body>
</html>
CSS3新增加的伪类选择器
<style>:root { color: pink } li:first-child { color: red } li:last-child { color: green } li:nth-child(0n+2) { color: blue } li:nth-last-child(0n+1) { color: silver }</style>- AAA
- BBB
- CCC
- DDD
- EEE
- FFF
- GGG
CSS3新增加的伪类选择器