CSS的选择器-伪类选择器
- anchor伪类：专用于控制链接的显示效果
| :link | a:link | 选择所有未被访问的链接。 |
|---|---|---|
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: blue;
}
a:visited{
color: red;
}
a:active{
color: aqua;
}
a:hover{
color: blueviolet;
}
</style>
</head>
<body>
<a href="http://baidu.com">百度</a>
</body>
</html>- before after伪类
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。
| :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下的第一个子元素（第一个儿子）*/
.c1 :first-child{
color: red;
}
/* 也可以在前面加入标签名，如果第一个儿子不是div，这不匹配*/
.c1 div:first-child{
color: red;
}
/*匹配父元素c1下的最后一个子元素（最后一个儿子）*/
.c1 :last-child{
color: blue;
}
/*在c3之前插入内容;display: block表示块级标签，默认为内联标签*/
.c3:before{
content: "这里为c3掐面插入的内容";
color: red;
display: block;
}
/*在c2之后插入内容*/
.c2:after{
content: "这里为c2后面插入的内容";
display: block;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">item0</div>
<p>
<div class="c3">item1</div>
</p>
<p>item2</p>
<div>item3</div>
</div>
</body>
</html>