伪类选择器目的就是向某些选择器添加特殊效果。
一、链接伪类选择器

  • :link—未访问的链接。
  • :visited—已访问的链接。
  • :hover—鼠标移动到链接上。
  • :active—选定的链接。

注意：写的时候要按照lvha的顺序。(lv包包非常hao)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> a:link { 
        /* 未访问的链接 */
        font-size: 16px;
        color: gray;
        font-weight: 700;      
    }
    a:visited {
        /* 已访问的链接 */
        font-size: 16px;
        color: orangered;
        font-weight: 700;          
    }
    a:hover {
        /* 鼠标移动到链接上 */
        font-size: 16px;
        color: red;
        font-weight: 700;          
    }
    a:active {
        /* 选定的链接 */
        font-size: 16px;
        color: green;
        font-weight: 700;       
    }
    </style>
</head>
<body>
<div> 
    <a href="#"> 秒杀 </a>  <br />
    <a href="#"> 闪购 </a> <br />
    <a href="#"> 优惠 </a> <br />
</div>
</body>
</html>

链接伪类选择器效果：

二、结构伪类选择器

  • :first-child:选取属于其父元素的首个子元素的指定选择器。
  • :last-child:选取属于其父元素的最后一个子元素的指定选择器。
  • :nth-child(n)匹配属于其父元素的第N个子元素，无论元素的类型 even偶数、odd奇数、n 从0开始。
  • :nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> li:first-child {
            color: pink;
        }
        li:last-child {
            color: purple;
        }
        li:nth-child(4) {
            color: red;
        }
        li:nth-child(even) {
            font-size: 30px;;
        }
        li:nth-last-child(even) {
            color:skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个孩子</li>
        <li>第二个孩子</li>
        <li>第三个孩子</li>
        <li>第四个孩子</li>
        <li>第五个孩子</li>
        <li>第六个孩子</li>
        <li>第七个孩子</li>
        <li>第八个孩子</li>       
    </ul>
</body>
</html>

结构伪类选择器效果：

三、目标伪类选择器

:target目标伪类选择器:选择器可用于选取当前活动的目标元素。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :target {
        color: red;
        font-size: 20px;
    }
    </style>
</head>
<body>
    <h3 id="top"></h3>
    <img src="双笙1.jpg" alt="图片加载失败" width="200">
    <h2>目录</h2>
    <hr />
    <a href="#experience">1 早年经历 </a> <br />
    <a href="#show">2 演艺经历</a> <br />
    <a href="#music">3 音乐作品</a> <br />
    <a href="#evaluate">4 人物评价</a> <br />

    <h3 id="experience">早年经历</h3>
    <hr />
    “双笙”是她小学毕业那年给自己取的圈名。她曾在“双笙”和“霜笙”两个名字之间犹豫很久，最终认定前者那两个字的结构看起来更美。
    初二时，双笙开始用社交软件直播唱古风音乐，也随着伴奏录过几首中国风的小情诗。母亲希望双笙学播音主持，以后回老家当播音员，
    为此还把她送到县广电局上了一段时间培训课，但双笙有自己的想法，更希望成为歌手。 
    <h3 id="show">演艺经历</h3>
    <hr />

    2015年4月，双笙在一款音乐App上发布了自己翻唱的古风音乐《故梦》，从而获得了一定的关注度；同年，推出个人原创单曲《采茶纪》。
    2016年4月，为网游《龙之谷》演唱的插曲《查尔德》正式上线；5月13日，发行专辑《笙声不息》；同年，与易言、樊棋、南久合作翻唱歌曲《九九八十一》（Bilibili2016年拜年祭歌曲）。
    2017年3月，为电视剧《红楼梦》青春版演唱的推广曲《终身误》正式上线；4月，与歌手慕寒合作，为网易网游《新倩女幽魂》六周年资料片“紫禁风云”演唱了倩女串烧歌曲《倩音流年》；
    同月，发布了一首为漫画《笑傲江湖》原创的东方不败同人歌曲《不立传-东方不败》 [7]  。
    2018年1月13日，推出原创单曲《少女净妖师》；同月，与GAI合作演唱《都市惊奇夜》。1月25日，为手游《楚留香》演唱的宣传曲《马步谣》正式上线。3月24日，推出个人单曲《司南歌》。
    8月24日，为电影《阴阳诀之祭情》演唱的主题曲《阴阳诀》正式上线 。12月5日，推出个人原创单曲《谢芳菲》。
    <h3 id="music">音乐作品</h3>
    <hr />
   
    01.	《长安忆》		   　 05.	《琴师》	<br />
    02.	《霜雪千年》		06.	《故梦》	<br />
    03.	《浮生未歇》		07.	《泸沽寻梦》	<br />
    04.	《画双》				<br />
    <h3 id="evaluate">人物评价</h3>
    <hr />
    双笙对古风音乐优美的旋律和独特的意境情有独钟，她略带沙哑的独特嗓音，具有极高的辨识度，被形容为“又沧桑又稚嫩”。
    在日本的Niconico上，有人说听了她的歌就想学汉语。（人民网、《齐鲁晚报》评）双笙用独有的古风曲调，
    独特的声线，以及宛如天籁的嗓音，将生命中的花谢花开，缘起缘灭，生活中的友情，乃至爱情等情感于诗情画意中娓娓道来，尽显古风古韵之纯净唯美 [5]  。（中国新闻网评）
    双笙在演唱歌曲《阴阳诀》时，将歌曲演唱的情感丰富、回味悠长，歌曲曲调优美中透露着一股悲壮，配合抒情的旋律，极具情绪感染力 。（腾讯娱乐评）


    <a href="#top">top</a> <br />
</body>
</html>

目标伪类选择器：

四、链接伪类的简写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 链接选择器 */
        a {
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
        /* 鼠标经过 */
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">秒杀 </a>
</body>
</html>

正常状态：

鼠标经过时：