前端——元素的伪类

最新推荐文章于 2022-08-05 11:44:27 发布
最新推荐文章于 2022-08-05 11:44:27 发布
阅读量72 收藏
点赞数
分类专栏： 前端 文章标签： HTML CSS 链接样式 伪类 访问状态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45058912/article/details/118528503
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 
            :link 用来表示没访问过的链接（正常的链接）
         */

        a:link{
            color: red;
            font-size: 50px;
        }

        /* 
            :visited 用来表示访问过的链接

            由于隐私的原因，所以visited这个伪类只能修改链接的颜色
         */

        a:visited{
            color: orange;
        }

        /* 
            :hover 表示鼠标移入的状态
         */

        a:hover{
            color: green;
            font-size: 30px;
        }

        /* 
            :active用来表示鼠标点击
         */
        a:active{
            color: greenyellow;
        }

    </style>
</head>
<body>

    <!-- 
        1.没有访问过的链接
        2.访问过的链接
     -->

    <a href="https://www.baidu.com">Baidu访问过的</a>

    <br><br>

    <a href="https://www.baidu123.com">没访问过的链接</a>
    
</body>
</html>
翊小宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端技能树，面试复习第 2 天——CSS 篇（1）：选择器 | 继承属性 | 隐藏元素 | 过渡动画 | 伪元素伪类
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
05-16 275
首先，我们来看看我提供给大家的关于 CSS 的面试知识体系图：考察 标签选择器、伪元素选择器、类选择器、伪类选择器、属性选择器、id 选择器、内联样式对于选择器的优先级：注意事项：考察对 无继承性的属性 和 可继承性属性的了解一、无继承性的属性二、有继承性的属性考察对 display 属性及其属性值的了解，如 考察对 display 属性及其属性值的理解；行内元素、块级元素的理解。（1）block： 会独占一行，多个元素会另起一行，可以设置 width、height、margin 和 padding 属性；
蓝旭前端第四周预习——定位+浮动+伪类+伪元素
南喑的博客
05-06 642
蓝旭第四周预习——定位+浮动+伪类+伪元素定位网页布局定位机制position属性浮动float属性clear属性伪类伪元素 定位 网页布局 定位机制 文档流 flow 浮动 float 层 layer position属性 浮动 float属性 作用：div实现横向多列布局 left—左浮动 right—右浮动 none—不浮动 特点： clear属性 伪类 伪元素 ...
java前端 伪类_前端一HTML:二十四伪类
weixin_39573136的博客
03-02 54
类选择器作用:是用来给对应的类标签设置样式。伪类也是给对应的标签设置样式。伪类选择器的样式要显示出来，这个标签就必须具备对应的条件。a:link 设置元素没有被访问过的样式。如果已经点击了一次，那么将来这个伪类中的样式将不会再被显示。a:visited 设置元素被访问过的样式如果这个元素已经被点了一次，那么将来这个伪类中的样式会一直显示。a:hover 设置鼠标悬停时元素的样式如果鼠标悬停，那...
前端一HTML:二十四伪类
m0_37564426的博客
05-13 289
类选择器作用:是用来给对应的类标签设置样式。 伪类也是给对应的标签设置样式。伪类选择器的样式要显示出来，这个标签就必须具备对应的条件。 a:link 设置元素没有被访问过的样式。 如果已经点击了一次，那么将来这个伪类中的样式将不会再被显示。 a:visited 设置元素被访问过的样式 如果这个元素已经被点了一次，那么将来这个伪类中的样式会一直显示...
css 中的伪类
luckydog
12-06 2260
CSS 伪类 (Pseudo-classes) 伪类包括选择器伪类、锚类伪类、内容伪类 选择器 伪类 属性 selector : pseudo-class {property: value} --------------------------------------------------- 选择器 类 伪类 ...
前端第一阶段-13（伪类、伪元素）
Victory_bad的博客
08-05 231
伪类用来添加一些选择器的特殊效果⚠️a:hover 必须放在 a:link 和 a:visited之后⚠️a:active 必须在 a:hover 之后。 伪类 说明 :hover 鼠标移入 :active 鼠标按下到抬起 a:link 链接访问前 a:visited 链接访问后 伪元素 说明 ::before 在... 前面加 ::after 在... 后面加..................
html前端基本选择器 伪类 伪元素笔记
qq_64353584的博客
01-17 884
前端基础知识
前端——关于伪类的实用小技巧
Bingtangbgd的博客
06-19 442
前端——关于伪类的实用小技巧
web前端基础——CSS入门
01-20
- 目标伪类选择器：`:target`，用于选择URL锚点指向的元素。 3. 字体样式： - `font-size`：设置字号，可用像素、em等单位。 - `font-family`：定义字体，可设置多个备选字体以防止某些字体不可用。 - `font-...
前端——浮动与定位
qq_50628631的博客
05-04 837
目录 浮动 1.浮动定义和语法 2.浮动特性 3.清除浮动 4.清除浮动示例 定位 1.定位组成 1.定位模式 2.边偏移 2.固定定位常用技巧 3.定位示例 4.定位拓展 浮动 1.浮动定义和语法 定义：在一个模块上添加浮动会使模块脱离文档流，也就是在不再占用文档的位置。添加浮动也会使一个行内元素变成块元素。 语法： 选择器{ float:属性值； } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 ri..
前端——图片标签
热门推荐
翊小宸的博客
07-01 4万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!--
前端——列表
翊小宸的博客
06-29 553
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 列表（list） 块元素 1.铅笔 2.尺子 3.橡皮
前端——伪类选择器
翊小宸的博客
07-06 388
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*
前端——meta标签
翊小宸的博客
06-29 386
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--
前端——选择器的权重
翊小宸的博客
07-09 285
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* #box1{
前端——超链接（一）
翊小宸的博客
06-29 242
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接</title> </head> <body> <!-- 超链接可以让我们从一个页面跳转到另一个页面， 或者是跳转到当前页面的其他位置 使用a标签来定义超链接
前端——超链接（二）
翊小宸的博客
06-29 229
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
前端——颜色
翊小宸的博客
07-09 228
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html{
前端——常用选择器
翊小宸的博客
07-06 229
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值