internet-explorer - ie8,9 中的 css 选择器问题

Question

我有一个名为 switch control 的 div 类，它有一个名为 thumb 的 div 类作为 child

<div class="switch-control">
         <div class="thumb"></div>
</div>

他们的 css 叫做:

.switch-control > .thumb
.switch-control > .thumb::before

两个 css 类都在 chrome 和 firefox 上生效并使用，但在 IE8,9 上 .switch-control > .thumb 处于事件状态并且 .switch-control > .thumb::before 被标记为未使用，因此我看不到它对 IE8、9 有影响

为什么会这样，我该如何解决？谢谢

Answer 1

出于某种奇怪的原因，IE9 倾向于为伪元素划掉样式，但它确实支持所有支持的伪元素的 CSS3 双冒号表示法(这包括 CSS1 ::first-line 和 ::first-letter，以及 CSS2 ::before 和 ::after)。如果您的样式不起作用，则说明其他地方出了问题(有很多 SO 问题与此有关，但我不知道是什么导致了问题)。

IE8 不支持任何伪元素的 CSS3 双冒号表示法，仅支持传统上一直使用的单冒号表示法。

如果您需要支持 IE8，则必须使用传统的单冒号表示法(出于兼容性原因，希望每个浏览器都继续支持它):

.switch-control > .thumb:before

关于您的评论:

I have updated my css style sheet from .switch-control > .thumb::before to .switch-control > .thumb:before (from double colon to single colon) but all browsers (chrome and IE) still shows double colon. how come?

正如我所提到的，伪元素现在应该以双冒号为前缀，并保留单冒号以保持兼容性。它只是应该从 CSS3 选择器开始并继续使用的新符号，因此当浏览器的开发人员工具遇到伪元素而不是伪类时，它如果它理解 CSS3，则用双冒号显示它。

换句话说，它只是用双冒号显示它的浏览器用户界面。它不会以任何方式改变样式表中的代码。