2

我有一个非常奇怪的问题。

所以我有一大堆 CSS，在其中的许多选择器中，我有一个看起来像这样的选择器，它工作得很好：

.spoilertop, #QUOTETOP, #CODETOP, .utubetop {
    padding-left: 44px;
    font-size:12px;
}

但随后我在其上方添加了一个看起来像这样的选择器：

.spoilermain:after, #QUOTE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #766161;
    border-style: solid;
    display: block;
    width: 0;
}​

然后spoilertop, #QUOTETOP, #CODETOP, .utubetop { }停止工作。它没有给我它应该给出的视觉效果。

我用不同的选择器再次测试了它。我有一个看起来像这样的选择器：

#recaptcha {
    background:#766161!important;
    font-size:11px;
}

然后我在它上面添加这个：

.utubemain:after, #CODE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #c08f84;
    border-style: solid;
    display: block;
    width: 0;
}​

再次，#recaptcha { }停止工作。

我试图一一删除属性，我发现content: "";是导致问题的属性。目前，解决方案是将一个随机未使用的选择器放在{ content: ""; }. 例如，它看起来像这样：

.spoilermain:after, #QUOTE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #766161;
    border-style: solid;
    display: block;
    width: 0;
}​

.some-line {
    border:#000;
    background:#200;
}

.spoilertop, #QUOTETOP, #CODETOP, .utubetop {
    padding-left: 44px;
    font-size:12px;
}

但是如果我有很多的话，那个解决方案有点麻烦content: "";。我真的很困惑为什么会发生这种问题。

所以...谁能帮我解释一下为什么？

4

2 回答 2

0

这违反了冗余规则，但是，您是否尝试过单独声明 .spoilermain:after 和 #QUOTE:after ？

于 2012-04-04T12:23:23.107 回答
-1

before 和 after 是伪元素，但不是伪类。所以它们应该这样使用：

.spoilermain::after 
{
}

但不像你那样

.spoilermain:after 
{
}

一些浏览器对此非常宽容，但在严格模式下会导致错误。

于 2013-10-24T16:23:40.580 回答