伪元素上的伪类答案

【问题标题】：Pseudo-class on pseudo-element伪元素上的伪类
【发布时间】：2014-12-27 06:01:13
【问题描述】：

明确地说，我并不是要为 css 做（伪）开始。只是想检查是否可以在伪元素上添加伪类。例如：

.some-class:after:hover {
}

好像没用。

这可行：

.some-class:hover:after {
}

当然，这不是：

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

我想要做的是 - 有一个 div。如果您将鼠标悬停在该 div 上，我将使用 :after 在该 div 上附加一个删除图标。我想设置这个图标的样式（比如，让它缩放到 1.1 左右）。这可能纯粹在 CSS 上吗？我只需要它在 Chrome 上工作。

【问题讨论】：

所以您将鼠标悬停在div 上，获得一个图标，然后您希望能够将鼠标悬停在该图标上以获得额外的效果？
这正是我想要的。尽量避免使用 JS 并释放 CSS 的全部功能。
这是不可能的......据我所知，至少使用纯 css
该死。不过那会很棒！
我不会使用 ::before 向您的 UI 添加不同的元素。 ::before 设计用于排版（添加引号）或外观（在元素周围放置 CSS 样式的对象）。您的问题表明您正在尝试使用::before 来构建用户界面；不要那样做。例如，您将无法在伪元素上进行单击（或任何其他事件，例如鼠标悬停）。相反，只需像往常一样将元素放入 HTML 中，并在必要时显示/隐藏它。

标签： css css-selectors pseudo-element pseudo-class

【解决方案1】：

不，当前标准不允许将伪类附加到伪元素。唯一可能出现伪元素的地方是复杂选择器的最后，并且在它之后不能出现其他选择器或组合器。参考spec。

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

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

【讨论】：

【解决方案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 附加一个元素。

【讨论】：