首页 > 代码库 > 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新增加的伪类选择器