伪类选择器
那么就来正式来学习一下伪类选择器，伪类选择器有较多的种类，先来学习一下动态伪类选择器
伪类选择器的语法是在<style>标签后加单冒号，并在单冒号后选择想要修改的样式。
用法：
应用对象标签:动作{修改样式内容}
需要注意的是，与伪元素选择器不同，伪类选择器只需添加单冒号而不是双冒号，这是在CSS3开始为进行区分而添加的语法，也就是说，如果编辑的伪元素选择器需要适配CSS1或者CSS2，可以也使用单冒号。
另外，如果不加应用对象标签则默认对标签应用样式修改。添加应用对象标签则是多了一重筛选。
图片来源于鱼C-小甲鱼的网络课程
首先来看动态伪类选择器。
:link、:visited、:hover、:active等动态伪类选择器都是可以应用在a元素中的，分别对应着链接未被访问、链接已被访问的时候、鼠标悬停在链接上方的时候、鼠标摁下链接的时候的状态。
来看一个例子
<!-- 已忽略html、head等标签 -->
<style type="text/css">
a:link {
color: black;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: blanchedalmond;
}
</style>
</head>
<body>
<a href="https://bilibili.com" target="_blank">这是一个链接</a>
效果如图：
已访问过的效果
鼠标悬停在链接上方的效果
摁下链接的效果
至于链接未被访问的效果，由于之前已点击过无法重现，应该需要清除一下浏览器的记录，比较麻烦就不展现了，意思传达到了就行，仍与上面的效果同理。
另外，需要注意的是。这四个伪类选择器在设置时需要按照一定的顺序才能生效。顺序分别是link->visited->hover->active。
如果觉得难记的话可以记忆一下“爱恨原则”
即按照
"Love&hate"的顺序记忆。
L stand for link
v stand for visited
h stand for hover
a stand for active
那么这四个伪类选择器就介绍完了。
需要注意的是，这些伪类选择器并不是只能用于a元素上的，比如:hover就经常用于div元素上。:active也可以用于p元素和button元素上。
实际上:active检测的是鼠标的点击
接下来介绍:focus伪类选择器。:focus伪类选择器应用在当元素获得焦点的时候，主要应用在input元素上。
比如：
<!-- 依然忽略html、head元素的书写 -->
<style type="text/css">
input#male:focus {
background-color: aqua;
}
input#female:focus {
background-color: pink;
}
</style>
</head>
<body>
<b>male:</b>
<input type="text" name="name" id="male" autocomplete="off">
<br/>
<b>female:</b>
<input type="text" name="name" id="female" autocomplete="off">
<br/>
</body>
效果：
效果如图所示
好啦，那么这次的笔记就写到这里啦。
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
