浏览器/用户代理默认样式、any-link 伪类选择器

在开发者工具中,选中一个元素,在 styles 标签往下滑动,发现如图所示的样式 "user agent stylesheet" 代表着浏览器默认的样式,每个浏览器的默认样式是不同的,所以我们在开发之前一般会

一、a 标签的默认样式

今天我突然发现,我的一个页面上的 a 标签点击的变成了红色,然后我搜了项目中没有任何地方设置了 a 标签的颜色。然后我去了 mdn 看 mdn 页面的 a 标签,都没有这么扎眼的颜色,一看原来是有设置的颜色。看来官网文;档也没用默认的样式。

去掉默认的样式,我们发现 a:active 是变成了红色,但是我发现了一个重来没有注意到的伪类 any-link

:any-link CSS 伪类选择器表示作为超链接源锚点的元素,无论是否已被访问。换言之,它匹配每个具有 href 属性的 <a> 或 <area> 元素。因此,它匹配所有匹配 :link 或 :visited 的元素。

any-link 只能匹配所有有 href 的 a 元素。所以其实在实际开发中,我们也可以使用 a:any-link 或者 a:-webkit-any-link 统一设置有 href 的链接的样式。

2.1 没有 href 的 a 标签【html4功能】

同一个页面的锚点功能,可以使用 a 标签 + name 属性来进行页面内部定位。

html 复制代码
<a name="top"></a>
<h1>页面顶部</h1>

<a href="#top">回到顶部</a>

说实话,我好久没用这个功能了,最近的项目都是使用 scrollTo / scrollTop / scrollIntoView 等 js 方法来实现,居然忘了这个原始的功能,

不过 h5 已经不用name了,直接该用 id 而且不需要额外的 a 标签,任何标签都可以。

html 复制代码
<div id="top"></div>
<h1>页面顶部</h1>

<a href="#top">回到顶部</a>

三、css 内置的系统关键字

上面的例子中 user-agent-stylesheet 的color 的值 -webkit-link 就是浏览器内置的 css 的系统关键字。类似的还有 -webkit-visited,但是我们很少直接使用他们,了解一下就好了。

相关推荐
To_OC4 小时前
从一头雾水到跑通全流程:我用一个周末啃透了JWT登录鉴权
前端·后端·http
excel6 小时前
研究 Vue 3 源码的收获
前端·vue.js
可乐鸡翅yeah_8 小时前
业务中 M3U8 水印相关坑,硬水印和动态水印区别
前端·网络·数据库·ffmpeg·m3u8在线
lerhxx8 小时前
AI 应用如何高效优雅地恢复中断?—— "连接解耦 + 状态持久化"
前端·javascript
计算机魔术师8 小时前
METR 演示 AI 智能体如何篡改 Inspect 评估记录以掩盖不当行为
前端
前端snow9 小时前
ai agent --- 异步处理之 Rabbit MQ
前端
念何架构之路9 小时前
zap扩展生态与总结
java·前端·数据库
独孤九剑打醒他9 小时前
【原创开源】【概念设计】源 - 栅 - 漏 - 栅 - 源 横向双栅 MOS,低压交流多值逻辑芯片探索
前端·其他·架构·开源·硬件工程
mantou1329 小时前
我给 AI Agent 做了个「油猴」:让 Claude Code / Codex 直接用你已登录的浏览器
前端·javascript·后端
默_笙9 小时前
🍕 一个主编、三个工种、两本手册:搭一支 AI 调研队
前端·javascript