Menu
CoddyTech
开始学习

激活样式

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 10 课，共 43 课。

当用户激活元素时，:active 伪类会为该元素应用样式。通常，用户会点击元素并按住鼠标按钮。

例如：

<button class="action-button">Click Me!</button>

添加 CSS，让按钮在处于激活状态时显示相应样式：

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

当你点击并按住按钮时，它会从蓝色变成深蓝色。这样可以通过视觉反馈让用户知道，他们的操作已被识别。

challenge icon

挑战

简单

为 .special-link 类编写 CSS，在链接处于激活状态时添加以下样式：

  1. 将文本颜色改为 #e74c3c
  2. 添加 1px 1px 2px rgba(0,0,0,0.3) 的文本阴影

亲手试试

<!DOCTYPE html>
<html>
<head>
    <title>Active Pseudo-class</title>
    <style>
        /* Write your CSS here */
        
    </style>
</head>
<body>
    <a href="#" class="special-link">Interactive Link</a>
</body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

精通 CSS中的所有课

1精通选择器：组合选择器

简介后代选择器子选择器相邻兄弟选择器通用兄弟选择器复习挑战

4下拉菜单项目

添加子菜单显示子菜单更多样式输入框和按钮

7使用 CSS Grid 构建

网格基础使用 grid-row 放置项目命名区域复习挑战

2交互式伪类

伪类悬停效果焦点效果激活样式复习挑战

5视觉效果

渐变CSS 滤镜变换过渡与悬停效果复习挑战

8风味盛宴网站

设置网格布局页眉主体部分页脚

3结构伪类

结构伪类选择第一个子元素选择最后一个子元素模式的力量：使用 nth-child复习挑战

6落地页

设置页眉区域样式设置按钮样式区域布局卡片布局完善细节

9最终挑战

高亮显示当前菜单项表格斑马纹行按钮悬停效果网格卡片布局模糊的主视觉图

自己练习： Web 在线编辑器