马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-1-28 08:19 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
开始前，先说一点历史背景。
在 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 选择器用于选取已被访问的链接，在上面的样式下面添加：
a:visited
{
color:pink;
}
:hover 选择器用于选择鼠标指针浮动在上面的元素，很常用的一个 CSS 样式。
继续添加：
a:hover
{
background-color:red;
}
由于当前链接已被访问过，所以颜色是 pink 。
当鼠标移入，添加背景色 red 。
:active 选择器用于选择活动链接。
只有当鼠标单击（安住）链接才会触发，当松开鼠标，样式消失哦。
继续添加样式：
a:active
{
font-size: 22px;
}
请记住，这四个元素是有使用顺序滴！
颠倒就无法执行想要的效果，遵循：
最后要说的是 :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>
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-12-18 08:06:36
置顶卡
千斤顶
显身卡
发表于 2020-1-23 22:14:32
发表于 2020-2-16 15:02:40
