上一集：034 - 初学CSS的噩梦（Ⅰ）



哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门



课程思维导图

登录/注册后可看大图
猛戳

                                
登录/注册后可看大图超清



开始前，先说一点历史背景。

在 CSS1 和 CSS2 中，上一讲的伪元素和今天的伪类都是一个 :

而在 CSS3 中才将二者却分开，前者 :: ，后者用 :

基础代码：

• 
  
• 
  
• 
  
• 
  
•     鱼C-零基础入门学习Web（Html5+Css3）
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 鱼C工作室
  
• 
  

接下来 :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;        }
  

安住链接不松手，字体变大，当松开，恢复正常：

登录/注册后可看大图

请记住，这四个元素是有使用顺序滴！

颠倒就无法执行想要的效果，遵循：



最后要说的是 :focus 选择器用于选取获得焦点的元素。

一般都是 input 元素当输入框获取用户的输入。

代码：

• 
  
• 
  
• 
  
• 
  
•     鱼C-零基础入门学习Web（Html5+Css3）
  
• 
  
•         input:focus
  
•         {
  
•             background-color:green;
  
•         }
  
• 
  
• 
  
• 
  
•    在文本框中点击，会看到绿色的背景：
  
• 
  
•        姓名:
  
•        性别:
  
• 
  
• 
  

当输入框获得焦点，就会添加相应的样式。



课后作业，完成了吗？

传送门

                                
登录/注册后可看大图

下一集：？？？



如果有收获，别忘了评分

：

                                
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅

）
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！

上一集：034 - 初学CSS的噩梦（Ⅰ）



哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门



课程思维导图

登录/注册后可看大图
猛戳

                                
登录/注册后可看大图超清



开始前，先说一点历史背景。

在 CSS1 和 CSS2 中，上一讲的伪元素和今天的伪类都是一个 :

而在 CSS3 中才将二者却分开，前者 :: ，后者用 :

基础代码：

• 
  
• 
  
• 
  
• 
  
•     鱼C-零基础入门学习Web（Html5+Css3）
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 鱼C工作室
  
• 
  

接下来 :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;        }
  

安住链接不松手，字体变大，当松开，恢复正常：

登录/注册后可看大图

请记住，这四个元素是有使用顺序滴！

颠倒就无法执行想要的效果，遵循：



最后要说的是 :focus 选择器用于选取获得焦点的元素。

一般都是 input 元素当输入框获取用户的输入。

代码：

• 
  
• 
  
• 
  
• 
  
•     鱼C-零基础入门学习Web（Html5+Css3）
  
• 
  
•         input:focus
  
•         {
  
•             background-color:green;
  
•         }
  
• 
  
• 
  
• 
  
•    在文本框中点击，会看到绿色的背景：
  
• 
  
•        姓名:
  
•        性别:
  
• 
  
• 
  

当输入框获得焦点，就会添加相应的样式。



课后作业，完成了吗？

传送门

                                
登录/注册后可看大图

下一集：？？？



如果有收获，别忘了评分

：

                                
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅

）
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！