CSS -- a:link 失效问题 及 属性选择器

简介: CSS -- a:link 失效问题 及 属性选择器

a:link 失效问题


代码:

运行结果:

发现Link2还是默认样式,

可知需加一个链接,有一个值(非空格);


点击Link1后

样式没有了,因为已经被访问过了。

那怎么才能让他重新又产生样式呢。

把浏览器的历史记录删除 就可以了。

或者重新给一个新的链接。

其他:

a:visited :已被访问状态。

a:link :未访问状态。

a:hover :鼠标悬停状态,当鼠标移动到链接上

a:active :用户激活,当你鼠标选定该元素

语法


属性选择器


~= 包含

  • 发现第二个也包含了标题,却不生效
  • 因为~=是包含以空格分隔的字词,才会生效。会算作一个整体。

再看下面的 *=包含

这个达到了预期,包含标题的属性都生效了。没有空格间隔的限制

还有属性title的作用是,当鼠标悬浮在其元素上时,显示提示文字,如下

相关文章
|
4月前
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`<link>`和`@import`两种引入方式。`<link>`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`<link>`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
123 2
|
3月前
|
前端开发
为什么最好把 CSS 的 link 标签放在 head 标签之间?
为什么最好把 CSS 的 link 标签放在 head 标签之间?
|
5月前
|
前端开发 JavaScript API
深入理解css中的link 和 @import
【7月更文挑战第3天】CSS中的link与@import有显著差异。link是HTML标签,用于并行加载CSS,支持动态插入,用途广泛,如加载图标。@import是CSS语法,加载顺序在页面解析后,不支持动态引入,但可在CSS中导入多个样式表。link在性能和兼容性上优于@import。优选link,@import适用于多文件组织样式。
115 1
深入理解css中的link 和 @import
|
4月前
|
Java Spring 数据库
怎样动动手指就能实现数据操作?Spring Data JPA背后的魔法揭秘
【8月更文挑战第31天】在Java开发中,数据库交互至关重要。传统的JDBC操作繁琐且难维护,而Spring Data JPA作为集成JPA的数据访问层解决方案,提供了CRUD等通用操作接口,显著减少代码量。通过继承`JpaRepository`,开发者能轻松实现数据的增删改查,甚至复杂查询和分页也不再困难。本文将通过示例详细介绍如何利用Spring Data JPA简化数据访问层的开发,提升代码质量和可维护性。
46 0
|
7月前
|
缓存 前端开发 JavaScript
CSS 的 link 标签放在 head 标签之间的作用
CSS 的 link 标签放在 head 标签之间的作用
93 1
|
7月前
|
前端开发 JavaScript UED
【Web 前端】css的引用有哪些,link和@import的区别?
【4月更文挑战第22天】【Web 前端】css的引用有哪些,link和@import的区别?
|
7月前
|
存储 缓存 前端开发
link 与 @import:CSS 样式表的加载策略(下)
link 与 @import:CSS 样式表的加载策略(下)
|
7月前
|
存储 前端开发 JavaScript
link 与 @import:CSS 样式表的加载策略(上)
link 与 @import:CSS 样式表的加载策略(上)
|
7月前
|
前端开发
css引入方式有几种?link和@import有什么区别?
css引入方式有几种?link和@import有什么区别?
108 0
|
7月前
|
缓存 前端开发
css中Link和@import之间有什么区别?
css中Link和@import之间有什么区别?