设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 035-动态伪类选择器 | css3
返回列表 发新帖
查看: 3356|回复: 3

[学习笔记] 035-动态伪类选择器 | css3

[复制链接]
liuzhengyuan
发表于 2020-3-1 19:58:19 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 liuzhengyuan 于 2020-3-23 12:51 编辑

《零基础入门学习web开发》第36讲 初学CSS的噩梦II | 学习笔记


伪类选择器：
伪类选择器.png

动态伪类选择器：
036-1.png

代码：
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>036-动态伪类选择器</title>
  6.     <style>
  7.     </style>
  8. </head>
  9. <body>
  10.     <a href="http://demo.fishc.com" target="_blank">戳戳我吧！！！</a>
  11. </body>
  12. </html>
复制代码


1,
在stlye标签里加上
  1. a:link {
  2.             color: blue;
  3.         }
  4.         a:visited {
  5.             color: red;
  6.         }
  7.         a:hover {
  8.             color: green;
  9.         }
  10.         a:active {
  11.             color: yellow;
  12.         }
复制代码

就是这样：
036-1.gif
必须有规律：
Love & Hate


2,更多
  1. :active {
  2.             background-color: black;
  3.         }
  4.         button:active, p:active{
  5.             color: white;
  6.             font-size: xx-large;
  7.         }
复制代码

效果：
036-3.gif
:active 可以在看似不可以被点击的标签上起作用


3,:focus
  1. .a:focus {
  2.             background-color: pink;
  3.         }
  4.         .b:focus {
  5.             background-color: cornflowerblue;
  6.         }
复制代码

效果：
036-4.gif

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

一个账号
发表于 2020-3-1 20:00:18 | 显示全部楼层
有水印
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

liuzhengyuan
 楼主| 发表于 2020-3-1 20:02:42 | 显示全部楼层
一个账号 发表于 2020-3-1 20:00
有水印

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

weiter
发表于 2020-3-2 13:55:46 | 显示全部楼层
@liuzhengyuan   为什么我写的：link好像设置的color无效但background-color却有用。。。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 11:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表