Question

好的，要明确，我不是要为css做（伪）启动。只是想检查是否可以在伪元素上添加伪类。例如：

.some-class:after:hover {
}

似乎没有用。

但这有效：

.some-class:hover:after {
}

当然，这并不是：

.some-class:hover:after:hover {
 }

我想做的是 - 有一个div。如果你将鼠标悬停在那个div上，我会在div上添加一个删除图标。我想要设置这个图标的样式（比如说，将它缩放到1.1左右）。这纯粹可以用于CSS吗？我只需要它就可以在Chrome上运行。

Answer 1

不，当前标准不允许将伪类附加到伪元素。伪元素可能出现的唯一位置是复杂选择器的最末端，其后不会出现其他选择器或组合器。请参阅spec。

像WebKit这样的实现有自己的规则，但它们是非标准的，不能跨浏览器工作。它们也可能不适用于所有伪类和/或所有伪元素。例如，据我所知，:after:hover不适用于任何浏览器，包括Chrome。

无论哪种方式，您都需要使用实际元素而不是伪元素。

Answer 2

正如@BoltClock已经回答的那样，:hover上无法附加:after伪，所以如果你愿意，你可以在容器元素中嵌入一个额外的元素并实现期望的效果。

div {
    height: 300px;
    width: 300px;
    border: 1px solid tomato;
    margin: 20px;
    position: relative;
}

div span {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
}

div:hover span {
    display: block;
    transition: font-size .5s;
}

div span:hover {
    font-size: 20px;
}

<div>
    <span>X</span>
</div>

这样可以在不使用页面上的任何JavaScript的情况下获得所需的效果，只有这样，您需要有一个额外的元素，所以如果您没有任何访问权限或修改HTML的权限，那么这不是除非您可以使用JavaScript附加元素，否则将为您服务。

关于伪元素的伪类

2 个答案: