上一集：034 - 初学CSS的噩梦（Ⅰ）
哈哈，废话不多说了，#敲黑板时刻！
在线视频：传送门
课程思维导图
登录/注册后可看大图
猛戳
登录/注册后可看大图超清
开始前，先说一点历史背景。
在 CSS1 和 CSS2 中，上一讲的伪元素和今天的伪类都是一个 :
而在 CSS3 中才将二者却分开，前者 :: ，后者用 :
基础代码：
- 鱼C-零基础入门学习Web（Html5+Css3）
- 鱼C工作室
接下来 :link、:visited 、:hover 、:active 都在其中的 style 中添加。
:link 选择器用于选取未被访问的链接，不会设置已经访问过的链接的样式。
添加样式：
由于链接还没有被访问，所以颜色为：
登录/注册后可看大图
:visited 选择器用于选取已被访问的链接，在上面的样式下面添加：
- a:visited
- {
- color:pink; }
然后刷新页面，单击链接，再切回页面：
登录/注册后可看大图
:hover 选择器用于选择鼠标指针浮动在上面的元素，很常用的一个 CSS 样式。
继续添加：
- a:hover
- {
- background-color:red; }
刷新页面，将鼠标移入 a 元素：
登录/注册后可看大图
由于当前链接已被访问过，所以颜色是 pink 。
当鼠标移入，添加背景色 red 。
:active 选择器用于选择活动链接。
只有当鼠标单击（安住）链接才会触发，当松开鼠标，样式消失哦。
继续添加样式：
- a:active
- {
- font-size: 22px; }
安住链接不松手，字体变大，当松开，恢复正常：
登录/注册后可看大图
请记住，这四个元素是有使用顺序滴！
颠倒就无法执行想要的效果，遵循：
最后要说的是 :focus 选择器用于选取获得焦点的元素。
一般都是 input 元素当输入框获取用户的输入。
代码：
- 鱼C-零基础入门学习Web（Html5+Css3）
- input:focus
- {
- background-color:green;
- }
- 在文本框中点击，会看到绿色的背景：
- 姓名:
- 性别:
当输入框获得焦点，就会添加相应的样式。
课后作业，完成了吗？
传送门
登录/注册后可看大图
下一集：？？？
如果有收获，别忘了评分 ：
登录/注册后可看大图
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅 ）
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！ |
|
千家悦IOT开放平台