1、anchor伪类:专用于控制链接的显示效果
: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>
2、before after伪类
: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>Title</title> <style> .c1 p:first-child{ color: red; } .c1 div:last-child{ color: red; } p#i1:after{ content:"hello"; color:red; display: block; } </style> </head> <body> <div class="c1"> <p>item1</p> <p>item1</p> <div>item1</div> <p>item1</p> </div> <p id="i1">p标签</p> </body> </html>