我怎样才能写出a:before:hover:visited条件呢?

我试了a:before:hover次,但没用.

推荐答案

这取决于您实际想要做什么.

如果只想在a元素与伪类匹配时将样式应用于:before伪元素,则需要编写a:hover:beforea:visited:before.请注意,伪元素来自伪类(实际上,位于整个 Select 器的末尾).还要注意,它们是两个不同的东西;一旦你遇到像这样的语法问题,把它们都称为"伪 Select 器"会让你感到困惑.

如果您正在编写CSS3,您可以用双冒号表示伪元素,以使这种区别更加清晰.因此,a:hover::beforea:visited::before.但是,如果您是为IE8或更早版本的遗留浏览器进行开发,那么使用单个冒号就可以了.

伪类和伪元素的这种特定顺序在spec:

可以将一个伪元素附加到 Select 器中的最后一个简单 Select 器序列.

sequence of simple selectors是一系列简单的 Select 器,它们之间没有组合符.它总是以类型 Select 器或通用 Select 器开始.序列中不允许使用其他类型 Select 器或通用 Select 器.

simple selector可以是类型 Select 符、通用 Select 符、属性 Select 符、类 Select 符、ID Select 符或伪类.

伪类是一个简单的 Select 器.然而,伪元素不是,尽管它类似于一个简单的 Select 器.

但是,对于用户操作伪类,例如:hover1,如果当用户与伪元素本身交互而不是与a元素交互时,需要应用only这种效果,那么除了通过一些模糊的依赖布局的变通方法之外,这是不可能的.正如本文所暗示的,标准CSS伪元素目前不能有伪类.在这种情况下,需要将:hover应用于实际的子元素,而不是伪元素.


1 Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.

Css相关问答推荐

如何在移动屏幕尺寸上包装元素?

当鼠标悬停在元素的::第一行时,如何应用样式?

显示Reaction组件上的问题.使用FlexBox时的意外大小

Firefox中的解决方法:has(不使用JavaScript)

如何使用 Cypress 从 React 下拉列表中进行 Select

Z Index 复杂性 - 如何将组件放置在 div 内部以相对于其级别外部的组件具有更高的 z-index 值?

Angular 以Angular 获取当前聚焦的元素

为什么同一个 CSS 类连续出现两次

父母是内联块,子元素有%填充=奇怪的行为

nth-child 在一个页面上工作,但不在另一个页面上

具有自动调整大小的自动填充行的 CSS 网格

在样式化组件中使图像重叠

将复选框对齐到中心

有条件地覆盖 CSS 中的 AntD Select 样式

无法使用 Bootstrap 3 更改占位符 colored颜色

Angular 动画的目的是什么?

Bootstrap 4:导航内的多级下拉菜单

为什么浏览器会为 CSS 属性创建供应商前缀?

如何知道哪个 HTML 元素导致了垂直滚动条

我可以在 css 中指定 maxlength 吗?