- A+
所属分类：Web前端
5 伪类选择器
anchor伪类：专用于控制链接的显示效果
| More Actions:link | a:link | 选择所有未被访问的链接。 |
|---|---|---|
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
<style> a:link{ color: red; } a:visited{ color: coral; } a:hover{ color: blue; } a:active{ color: rebeccapurple; } </style> before after伪类
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。
| More Actions:first-child | p:first-child | 选择属于父元素的第一个子元素的每个
元素。 |
|---|---|---|
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个
元素。 |
| :before | p:before | 在每个
元素的内容之前插入内容。 |
| :after | p:after | 在每个
元素的内容之后插入内容。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css伪类选择器</title> <style> /*a:link{*/ /* color: red; !* 鼠标点击字体变成红色 *!*/ /*}*/ /*a:visited{*/ /* color: coral; !* 设定字体为橙色 *!*/ /*}*/ /*a:hover{*/ /* color: blue; !* 鼠标滑过字体变成蓝色 *!*/ /*}*/ /*a:active{*/ /* color: rebeccapurple;*/ /*}*/ .c1 p:first-child{ color: red; } p#i1:after{ content: "这是一个伪类构造的块级标签"; display: block; color: gold; } </style> </head> <body> <a href="https://www.baidu.com">hello world! </a> <div class="c1"> <p>item1</p> <p>item2</p> <div>item3</div> <p>item4</p> </div> <div id="i1"> DIV标签 <!-- <div style="color: red">这是一个伪类构造的块级标签</div>--> </div> <p>两只黄鹂鸣翠柳</p> </body> </html> 
