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 { }動作を停止します。

プロパティを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: "";。そして、なぜそのような問題が起こっているのか、私は本当に混乱しています。

だから...誰かが私が理由を説明するのを手伝ってくれる？

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 に答える