Question

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

所以我有一大堆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: "";，那么这个解决方案有点麻烦。我真的很困惑为什么会出现这种问题。

所以......有人可以帮我解释原因吗？

Answer 1

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

Answer 2

之前和之后是伪元素但不是伪类。因此它们将被用作：

.spoilermain::after 
{
}

但不像你那样

.spoilermain:after 
{
}

有些浏览器非常宽容，但在严格模式下应该会导致错误。

为什么`content：“”`否定它下面的选择器？

2 个答案: