学号后四位：（0133）
邀请人ID：（非必填）
哈喽！前端的小伙伴们大家好！
相信大家在平时写代码的过程中会遇到一些问题，比如：我想要简单的添加一些类似动态的效果，增加交互性，或者是需要一定js代码来实现的逻辑效果。但是我又不会写动态的样式，我也不是很懂js语言，那我们怎么用简单的CSS来实现我们想要的效果呢？这就需要用到我今天给大家介绍的“伪类”(Pseudo-classes)。
那么什么是伪类呢？伪类就是用来添加一些选择器的特殊的效果。
下面是伪类的语法格式：
选择器 : 伪类 { CSS属性 : 属性值 }
选择器我们大家都知道，它用于选择需要添加样式的元素，可以是通过标签直接选择，也可以通过标签的id值来选择，又或者是通过class属性来选择对应标签。
这里我为大家列举几个常见的伪类：
首先，我们看代码和运行效果图：
<html>
<head>
<meta charset="utf-8">
<title>伪类介绍</title>
<style>
a { font-size: 20px; text-align:center; background-color: blue; }
a:link {background-color: red;} /* 未访问的链接 */
</style>
</head>
<body>
<a href="www.baidu.com">百度</a>
</body>
</html>
Anchor伪类，:link 。它的作用是对未访问的链接做标注。
我们可以看到在给标签“<a>”加上伪类之前，我们给它设置了背景色为蓝色的属性，在伪类里又写了背景色为红色这一属性，根据运行效果来看，背景色为红色，也就是说，伪类里的属性会覆盖掉之前设置的相同的属性。
我们再看下面这段代码:
<head>
<style>
a { font-size: 20px; color: #000000;}
#one:link {color: red;} /* 未访问的链接 */
#two:visited {color:#00FF00;} /* 已访问的链接 */
#three:hover {color:#FF00FF;} /* 鼠标划过链接 */
#four:active {color:#0000ff;} /* 已选中的链接 */
</style>
</head>
<body>
<a id="one" href="http://www.qq.com">线路一</a><br>
<a id="two" href="http://www.baidu.com">线路二</a><br>
<a id="three" href="http://www.baidu.com">线路三</a><br>
<a id="four" href="http://www.baidu.com">线路四</a>
</body>
这次的选择器我们采用的是id选择器，“ :visited ”。它会对已访问的链接做出特殊标注，在访问过后它的字体颜色变成了绿色；
“ :hover ”当鼠标滑过这个链接的时候，字体颜色变成了粉色；
“ :active ”当鼠标点击或者选中这个图标的时候，字体颜色变成了蓝色；
注：大家需要注意的是当这四个伪类同时出现并且修饰同一个选择器的时候这四个伪类是有先后顺序的： a:hover 必须在 a:link 和 a:visited 之后。 a:active 必须在 a:hover 之后。
这些都是针对链接标签的，但是我们照样可以把他们灵活运用到别处。比如我们可以给其他元素使用 :hover 这一个伪类，在鼠标滑过时候就可以有不一样的效果。下面有一个实例，小伙伴们可以参考。
<head>
<style>
.text{
border: 1px solid #000000;
border-radius: 20px;
height: 20px;
width: 100px;
padding: 5px;
}
.text:hover{
border: 1px solid #000000;
border-radius: 20px;
height: 20px;
width: 100px;
padding: 5px;
box-shadow: 0px 3px 4px #aaa5a8;
}
</style>
</head>
<body>
<p class="text">这是一段文字</p>
</body>
我们对 <p> 标签添加class选择器，添加初始的CSS样式属性值，之后对其使用 :hover 伪类增加了一条 box-shadow 属性，当鼠标滑过这段文字时就会显示不一样的效果。同样这一伪类也可以放到其他标签属性上，如果我们再配合动画就可以得到一个简单的展开效果：
<head>
<style>
.text{
border: 1px solid #000000;
border-radius: 20px;
height: 20px;
width: 100px;
padding: 5px;
}
.text:hover{
border: 1px solid #000000;
border-radius: 20px;
height: 20px;
width: 100px;
padding: 5px;
box-shadow: 0px 3px 4px #aaa5a8;
animation:myfirst 3s;/*设置动画基本属性动画名称和持续时间*/
animation-fill-mode:forwards;
}
@keyframes myfirst
{
from {height: 20px;}
to {height: 100px;}
}
</style>
</head>
<body>
<p class="text">这是一段文字</p>
</body> 
当鼠标移过去的时候，我们可以看的触发了动画。
下面是其他的伪类和说明，小伙伴们可以自行查阅：
| 选择器 | 说明 |
| :checked | 选择所有选中的表单元素 |
| :disabled | 选择所有禁用的表单元素 |
| :empty | 选择所有没有子元素的p元素 |
| :enabled | 选择所有启用的表单元素 |
| :first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | 选择元素指定范围内的值 |
| :invalid | 选择所有无效的元素 |
| :last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | 选择所有p以外的元素 |
| :nth-child(n) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | 选择所有仅有一个子元素的p元素 |
| :optional | 选择没有"required"的元素属性 |
| :out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | 选择只读属性的元素属性 |
| :read-write | 选择没有只读属性的元素属性 |
| :required | 选择有"required"属性指定的元素属性 |
| :root | 选择文档的根元素 |
| :target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | 选择所有有效值的属性 |
| :link | 选择所有未访问链接 |
| :visited | 选择所有访问过的链接 |
| :active | 选择正在活动链接 |
| :hover | 把鼠标放在链接上的状态 |
| :focus | 选择元素输入后具有焦点 |
| :first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | 选择每个<p> 元素的第一行 |
| :first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | 在每个<p>元素之前插入内容 |
| :after | 在每个<p>元素之后插入内容 |
| :lang(language) | 为<p>元素的lang属性选择一个开始值 |
以上的伪类说明，部分并不只局限于说明中提到的标签，别的标签也可以运用这些伪类；但是并不是所有的标签都可以使用这些伪类，需要小伙伴们经过测试才可以得知到底适不适用，比如 :empty 这个伪类，它适用<p> , <li> , <h> 等标签，就不适用 <a>,<table>,<dr> 等标签。
欢迎大家在评论区讨论。
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
