なぜ `content：" "`それ以下のセレクタを否定するのですか？

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 { }停止し、私はこのようになりますセレクタを持っています。

プロパティを1つずつ削除しようとしましたが、問題の原因となっているのは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 
{ 
} 

をしなかったとして、一部のブラウザではエラーが発生しなければならないことはかなりその上許容が、strictモードです。