伪类在伪元素上的应用

Question

请明确，我不是在尝试为CSS创建（伪）梦境。只是想检查是否可能在伪元素上添加伪类。例如：

.some-class:after:hover {
}

似乎不起作用。

但是这个是有效的：

.some-class:hover:after {
}

当然，这并不包括：

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

我想做的是-有一个div。如果你在那个div上悬停，我会使用:after将一个删除图标附加到该div上。我想样式化这个图标（比如说，让它缩放到1.1倍左右）。这在纯CSS中是否可行？我只需要在Chrome上工作。

- Mr Boss

---

当你悬停在div上时，会出现一个图标，然后您希望能够悬停在图标上以获得额外的效果。 - jmore009

这正是我想要的。试图避免使用JS，发挥CSS的全部能力。 - Mr Boss

@UdaiArora 你需要一个解决方法吗？那我可以发一个。 - Mr. Alien

我不会使用::before来为您的UI添加独特的元素。 ::before是为诸如排版（添加引号）或外观（在元素周围放置CSS样式化对象）之类的事物而设计的。 您的问题表明您正在尝试使用::before构建UI； 不要这样做。 例如，您将无法在伪元素上捕获单击（或任何其他事件，例如鼠标悬停）。 相反，只需像往常一样将元素放入HTML中，并在必要时显示/隐藏它。 - user663031

请注意，在CSS3中它是::after（有2个冒号）。 - Alexis Wilke

Answer 1

不，现有标准不允许在伪元素上使用伪类。伪元素只能出现在复合选择器的最末尾，后面不能跟其他选择器或组合器。请参考规范。

一些实现（如WebKit）有自己的规则，但它们是非标准的，并且不能跨浏览器工作。它们也可能不适用于所有伪类和/或所有伪元素。例如，据我所知，在任何浏览器（包括Chrome）上都无法使用:after:hover。

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

- BoltClock

Answer 2

如@BoltClock所回答的那样，无法在:after上附加:hover伪类，因此如果需要，可以在容器元素中嵌套一个额外的元素来实现所需效果。

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附加元素。

- Mr. Alien