斯莫尔访问的风格

在CodePen中打开

:visited 伪类是非常独特的，因为在用户的隐私方面有可能被利用。为了解决这个问题，浏览器制造商已经限制了哪些CSS样式允许使用:visited 。

一个关键的问题是，通过:visited 应用的样式将总是使用父级的alpha通道–这意味着，你不能使用rgba 来从不可见变为可见，你必须改变整个颜色值。因此，为了隐藏初始状态，你需要能够使用一种纯色，比如页面或元素的背景色。

像往常一样–这个演示有额外的技术和属性!注意我们使用flexbox更新被访问指标的_顺序_的方式。而且，我们正在使用一些新支持的属性来改变链接下划线的颜色、位置和样式。

另外，我们再次使用fit-content ，但这次是作为width 的一个值，而不是作为一个函数。这意味着它将扩展到相当于max-width ，但不_超过_可用宽度，防止溢出。

ul.smol-visited-styles { –color-background:#fff; –color-accent: green; display: grid; grid-gap: 0.5rem; width: fit-content; padding:1rem; border-radius: 0.5rem; background-color: var（-color-background）; border:1px solid var(-color-accent); } .smol-visited-styles a { display: flex; flex-direction: row-reverse; justify-content: flex-end; color:#222; text-decoration-color: var(-color-accent); text-decoration-style: dotted; text-underline-offset: 0.15em; } .smol-visited-styles a span { margin-right: 0.25em; /*从正常的文档流中移除，这排除了它接受下划线✨ */ float: left; } .smol-visited-styles a span::after { content:”✔”; color: var(-color-background); } .smol-visited-styles a:visited span::after { color: var(-color-accent); } “Smol访问过的样式 “的CSS

ul.smol-visited-styles {  --color-background: #fff;  --color-accent: green;  display: grid;  grid-gap: 0.5rem;  width: fit-content;  padding: 1rem;  border-radius: 0.5rem;  background-color: var(--color-background);   border: 1px solid var(--color-accent);}.smol-visited-styles a {  display: flex;  flex-direction: row-reverse;  justify-content: flex-end;  color: #222;  text-decoration-color: var(--color-accent);  text-decoration-style: dotted;  text-underline-offset: 0.15em;}.smol-visited-styles a span {  margin-right: 0.25em;  /* Remove from normal document flow  which excludes it from receiving   the underline ✨ */  float: left;}.smol-visited-styles a span::after {  content: "✔";  color: var(--color-background);}.smol-visited-styles a:visited span::after {  color: var(--color-accent);}
复制代码

• ModernCSS.dev
• LearnFromSteph.dev
• 课程。无障碍的表单字段样式

Una Kravets有一个更深入的关于样式设计的参考资料:visited 。关于另一个例子，请看我是如何为风格阶段目录设计风格的。