4

我有以下伪元素：

input[type=radio].selected::before

在 Internet Explorer 中，伪元素根本没有显示，所以我决定看一下。我在检查器中找到了选择器（检查器中的选择器将是一本很棒的儿童读物！）但是所有属性都被删除了。（即被覆盖/无效）。大多数属性不会被其他属性覆盖。这是 IE 中的默认行为还是这是否意味着样式根本不起作用，更重要的是，它们为什么不显示？下面是完整的CSS：

input[type=radio]{
    visibility:hidden;  
    cursor: pointer;
    width: 22px;
    height: 22px;
}

input[type=radio]::before{
    content: "";
    display: inline-block;
    visibility: visible;
    width: 16px;
    height: 16px;
    margin-bottom: 0;
    border: 1px solid #ddd;
    -moz-border-radius:8px;
    border-radius:8px;
    font-size: 41px;
    line-height: 18px;
    padding-left: 1px;
    color: #a3a3a3;
}
4

2 回答 2

3

W3：

:before 和 :after 伪元素

作者使用 :before 和 :after 伪元素指定生成内容的样式和位置。正如它们的名字所示，:before 和:after 伪元素指定了元素文档树内容之前和之后的内容位置。'content' 属性与这些伪元素一起指定插入的内容。

换句话说，伪元素只能用在容器元素上。这就是为什么它不适用于您的输入元素。

于 2013-09-25T14:57:46.337 回答
1

您的问题是如何在 IE 中调试伪元素，因为我现在没有答案（在 Mac atm 上）。不过，我可以告诉你：

输入是一个自闭合元素 ( <input />)，因此它没有实际内容。例如图像也是如此。正因为如此，没有什么可以在之前或之后添加东西，因为这些伪元素是在元素内容之前/之后插入的（你猜对了）。

长话短说： ::before 和 ::after 不适用于自闭合元素。

于 2013-09-25T14:57:23.870 回答