伪类在伪元素 [英] Pseudo-class on pseudo-element

问题描述

可以明确，我不是试图使（伪）开始为css。只是想检查是否可以在伪元素上添加伪类。例如：

  .some-class：after：hover {
} 
  
 
 
 
 $ b  
 
 $ b 
  .some-class：hover：after {
} 
  
而且，当然，这不会：
  .some-class：hover： after：hover {
} 
  
我想做的是 - 。如果您将鼠标悬停在该div上，我将使用：在div之后附加一个删除图标。我想为这个图标设置样式（比如说，放大到1.1左右）。这是可能纯粹在CSS？我只需要它在Chrome上工作。
解决方案
不，当前标准不允许将伪类附加到伪元素。伪元素可能出现的唯一位置在复选择器的末尾，并且在其后不会出现其他选择器或组合器。请参阅规格。
 
 
 
有些实现类似WebKit有自己的规则，但是它们是非标准的，不工作的跨浏览器。它们也可以不应用于所有伪类和/或所有伪元素。例如，据我所知，：after：hover 在任何浏览器上都不起作用，包括Chrome。
 
 
 
无论哪种方式，您都需要使用实际元素而不是伪元素。
 
OK to be clear, I am not trying to make the (pseudo)inception for css. Just wanted to check if it's possible to add a pseudo class on a pseudo element. For eg:
.some-class:after:hover {
}
doesnt seem to work.

This works though:
.some-class:hover:after {
}
And ofcourse, this doesn't:
.some-class:hover:after:hover {
 }
What I am trying to do is- there is a div. If you hover on that div, I am attaching a delete icon using :after on the div. I want to style this icon (say, have it zoom to 1.1 or so). Is this possible purely on CSS? I just need it to work on Chrome.
解决方案
No, the current standard does not allow attaching pseudo-classes to pseudo-elements. The only place where a pseudo-element may appear is at the very end of a complex selector, and no other selectors or combinators may appear after it. Refer to the spec.

Some implementations like WebKit have their own rules, but they are non-standard and do not work cross-browser. They may also not apply to all pseudo-classes and/or all pseudo-elements. For example, as far as I know, :after:hover does not work on any browser, Chrome included.

Either way, you will need to use an actual element instead of a pseudo-element.

                        
这篇关于伪类在伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！