首页 > web前端 > css教程 > 如何使用 `:hover` 和 `:visited` 伪类来设置 `a:before` 的样式?

如何使用 `:hover` 和 `:visited` 伪类来设置 `a:before` 的样式?

Susan Sarandon
发布: 2024-12-15 01:36:10
原创
325 人浏览过

How to Style `a:before` with `:hover` and `:visited` Pseudo-classes?

解决使用 ':hover' 和 ':visited' 条件调用 'a:before' 的问题

无法成功利用 ' a:before:hover' 源于对 CSS 语法的基本理解。当“a”元素与伪类匹配时,要正确地将样式应用于“a:before”伪元素,格式应为“a:hover:before”或“a:visited:before”。这表示伪元素位于选择器中的伪类之后。

在 CSS3 中,使用双冒号(例如 'a:hover::before' 或 'a:visited::before ') 增强了区分伪类和伪元素的清晰度。但是,对于 IE8 及以下版本的旧浏览器来说,单冒号就足够了。

伪类和伪元素的顺序在规范中严格定义。伪元素只能附加到简单选择器序列的末尾,该序列是没有组合器的选择器链。简单选择器包括类型选择器、通用选择器、属性选择器、类选择器、ID选择器和伪类。虽然伪类是简单的选择器,但伪元素不是。

但是,对于像 ':hover' 这样的用户操作伪类,如果所需的效果仅限于用户与伪元素的交互,目前通过标准 CSS 是不可行的。相反,':hover' 必须应用于实际的子元素。

以上是如何使用 `:hover` 和 `:visited` 伪类来设置 `a:before` 的样式?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板