035 - 初学CSS的噩梦（II）

不二如是 · 发表于 2019-12-18 08:06:36

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-1-28 08:19 编辑

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

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

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

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

在 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;
}

复制代码

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

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

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

游客，如果您要查看本帖隐藏内容请回复

最后要说的是 :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>

复制代码

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

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：036 - 初学CSS的噩梦（III）

如果有收获，别忘了评分

：

登录/注册后可看大图

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

）

zltzlt · 发表于 2020-1-23 22:14:32

神奇

Albertdjy · 发表于 2020-2-16 15:02:40

MYlindaxia · 发表于 2020-3-12 09:17:35

love hate原则

Fire4EVER · 发表于 2020-6-24 16:35:44

白灬夜彡 · 发表于 2020-7-16 21:44:30

Bright06 · 发表于 2020-8-14 23:40:21

我要好好学习= · 发表于 2020-8-20 18:01:38

昵称_cwb · 发表于 2020-8-27 10:17:31

huiyi479 · 发表于 2020-9-21 09:06:49

pym131420 · 发表于 2020-11-9 21:00:16

trefrn · 发表于 2020-12-5 15:54:34

我爱鱼C

natapon · 发表于 2021-1-14 23:03:26

love and hate

笙歌醉梦 · 发表于 2021-1-20 12:28:03

只想白嫖 · 发表于 2021-2-4 18:01:47

O2H2O · 发表于 2021-7-8 18:21:34

LOVE & HATE

心驰神往 · 发表于 2021-8-3 15:28:19

顺序？

刘彩玲 · 发表于 2021-8-9 22:52:00

想看

hanyuncanying · 发表于 2021-8-24 21:21:53

douTREE · 发表于 2021-9-10 17:07:48

I Love fishc

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 035 - 初学CSS的噩梦（II）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: