笔记|使用CSS选择器(使用动态伪类选择器)

简介: 使用动态伪类选择器

根据条件的改变匹配元素,相对于文档的固定状态。


1.使用:link 和 :visited 选择器

  • :link 选择器匹配超链接。
  • :visited选择器匹配用户已访问的超级链接。

image.png


对于用户访问过的链接,可在浏览器中设置保留已访问状态的时间。


当用户清楚浏览器历史记录,或历史记录超时,链接会返回未访问状态。

<style type="text/css">
:link {
border: thin black solid;
background-color: lightgrey;
padding: 4px;
color:red;
}
:visited {
background-color: grey;
color:white;
}
</style>


⚠️使用:visited选择器可以应用到链接元素的属性不多(改变颜色和字体)。


visited选择器匹配用户在所有页面访问过的href属性为URL的任意链接,而不只是你的页面。


:visited最常见的用法就是针对已访问的链接应用某种样式,从而让它们跟未访问的链接有所区别。


2.使用:hover 选择器

:hover选择器匹配用户鼠标悬停在其上的任意元素。鼠标移动时,选中的元素样式会发生改变。

image.png

<style type="text/css">
:hover {
border: thin black solid;
padding: 4px;
}
</style>


3.使用:active 选择器

:active 选择器匹配当前被用户激活的元素。在鼠标点击的情况下使用这个选择器。

image.png

<style type="text/css">
:active {
border: thin black solid;
padding: 4px;
}
</style>


:active 选择器不仅限于用户可以与之交互的元素。


4.使用:focus选择器

:focus 匹配当前获得焦点的元素。(input常用)

image.png

<style type="text/css">
:focus{
border: thin black solid;
padding: 4px;
}
</style>


目录
相关文章
|
19天前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
29天前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
26 1
|
30天前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
1月前
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
52 3
|
1月前
|
前端开发
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
|
30天前
|
前端开发
解锁CSS神秘面纱:深度剖析类选择器,掌握前端设计的绝密武器!
解锁CSS神秘面纱:深度剖析类选择器,掌握前端设计的绝密武器!
|
1月前
|
XML 前端开发 安全
如何使用 CSS 中的 :root 伪类选择器
如何使用 CSS 中的 :root 伪类选择器
27 0
|
1月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
24 0
|
1月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记(2)
理解CSS | 青训营笔记
26 0
|
前端开发 Web App开发
css使用笔记
最近写一个前台页面,因为不用考虑太多兼容性问题,尝试了很多css3的东西,记录下。 1、渐变和边框阴影 最初的视觉稿,上面有很多地方颜色使用了渐变,为了不使用图片,用了很挫的方式来实现:从图片渐变开始、中间、结束部分,用gimp的吸管获取颜色,然后转换成css的渐变。不过因为渐变每个浏览器支持方
1603 0