035 - 初学CSS的噩梦（II）
本帖最后由 不二如是 于 2020-1-28 08:19 编辑上一集：034 - 初学CSS的噩梦（Ⅰ）
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
开始前，先说一点历史背景。
在 CSS1 和 CSS2 中，上一讲的伪元素和今天的伪类都是一个 :
而在 CSS3 中才将二者却分开，前者 :: ，后者用 :
基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<style>
</style>
</head>
<body>
<a href="http://www.fishc.com" target="_blank">鱼C工作室</a>
</body>
</html>
接下来 :link、:visited 、:hover 、:active 都在其中的 style 中添加。
:link 选择器用于选取未被访问的链接，不会设置已经访问过的链接的样式。
添加样式：
a:link
{
color:green;
}
由于链接还没有被访问，所以颜色为：
:visited 选择器用于选取已被访问的链接，在上面的样式下面添加：
a:visited
{
color:pink;
}
然后刷新页面，单击链接，再切回页面：
:hover 选择器用于选择鼠标指针浮动在上面的元素，很常用的一个 CSS 样式。
继续添加：
a:hover
{
background-color:red;
}
刷新页面，将鼠标移入 a 元素：
由于当前链接已被访问过，所以颜色是 pink 。
当鼠标移入，添加背景色 red 。
:active 选择器用于选择活动链接。
只有当鼠标单击（安住）链接才会触发，当松开鼠标，样式消失哦。
继续添加样式：
a:active
{
font-size: 22px;
}
安住链接不松手，字体变大，当松开，恢复正常：
请记住，这四个元素是有使用顺序滴！
颠倒就无法执行想要的效果，遵循：
**** Hidden Message *****
最后要说的是 :focus 选择器用于选取获得焦点的元素。
一般都是 input 元素当输入框获取用户的输入。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<style>
input:focus
{
background-color:green;
}
</style>
</head>
<body>
<p>在文本框中点击，会看到绿色的背景：</p>
<form>
姓名: <input type="text" name="请输入姓名" /><br>
性别: <input type="text" name="请输入性别" />
</form>
</body>
</html>
当输入框获得焦点，就会添加相应的样式。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：036 - 初学CSS的噩梦（III）
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 神奇{:10_254:} 1 love hate原则 1 {:5_91:} {:10_254:}{:10_254:} 1 {:5_101:} 123 我爱鱼C love and hate {:5_97:} 11 LOVE & HATE 顺序？ 想看 {:7_146:} I Love fishc
页:
[1]
2