CSS伪类选择器

一、常用伪类解释

1、：link伪类选择器

          该伪类选择器是选择所有未被访问的链接，只可选中没有被访问过的链接标签，更改或者赋予该标签CSS样式，已经被访问过的标签或者其它非链接标签的样式将不会被更改

2、:visited伪类选择器

          ：visited伪类选择器是选择所有已被访问的标签并对其CSS样式进行更改或者设置，和:link选择器一样无法选择非链接类标签且不选则未访问过的链接

3、：hover伪类选择器

          选择鼠标位于其上的元素，即用来编辑当浏览页面时鼠标移到内容时的页面样式

4、：active伪类选择器

          选择活动元素，即鼠标按下未弹起的元素，用于设置鼠标按下状态时所页面的CSS样式

5、：focus伪类选择器

         ：focus伪类选择器用于获得焦点的表单元素，焦点就是光标，一般情况只有<input>类表单才能获取，因此这类选择器主要针对表单元素来说，当鼠标移入选中输入框时即为聚焦，：focus选择器选中该表单元素，该伪类选择器下的CSS样式生效，当鼠标离开输入框时即为失焦，：focus选择器下的CSS样式因没有元素被选中而不被使用

二、上述伪类选择器代码示例

HTML代码

<a href="../360截图2.0.exe" class="non">未被访问的链接文本颜色为绿色（该链接没有被点击过）</a>
    <a href="./" class="yep">访问过的链接文本颜色为红色（该链接没已经点击过）</a>
    <div class="ho">鼠标位于元素上文本颜色变为蓝色</div>
    <div class="ac">鼠标按下不放开元素文本颜色变为红色</div>
    <input type="text" class="put" value="鼠标移入输入框输入框背景颜色变为蓝色">

CSS代码

        a {
            text-decoration: none;
        }
 
        .non:link {
            color: green;
        }
 
        .yep:visited {
            color: red;
        }
        .ho:hover{
            color: blue;
        }
        .ac:active{
            color: red;
        }
        .put:focus{
            background-color:rgb(99, 99, 244);
        }