Question

我有以下css：

#clickto {
    color: white;
    text-shadow: 2px 2px 2px Darkblue;
}

#verdescheading:hover {
    border-bottom: 1px solid;
}


    #verdescheading :before {
        content: " >";
    }

    #verdescheading :after {
        content: " <";
    }

    #verdescheading .clicked:before {
        content: "< ";
    }

    #verdescheading .clicked:after {
        content: "> ";
    }

以及下面的html（直接从firebug中剪切和粘贴，所以它准确无误）：

<h1 id="verdescheading" class="">
Important notice
<span id="clickto">(Click to expand)</span>
</h1>

单击事件的标题部分时，将“verdescheading”类设置为“clicked”。 Firebug表明一切都按照应有的方式进行设置。但是，我在页面上看到的内容有点不同。

首先，＆gt;和＆lt;根据样式表设置的符号出现在不是具有id verdesc的h1之前和之后，而是出现id为“clickto”的跨度，即其直接子项。 Firebug清楚地表明，'clicked'类是在父级而不是子级上设置的。

另一件事是符号不会改变，即它始终是以下规则：before和：after而不是.clicked：before和.clicked：after。

Answer 1

#verdescheading.clicked:before {
    content: "< ";
}

#verdescheading.clicked:after {
    content: "> ";
}

修复符号不会改变，因为id和class在同一个元素上，而不是它的子元素之一，没有空格。

其他问题也因间距问题而解决：

#verdescheading:before {
    content: " >";
}

#verdescheading:after {
    content: " <";
}

见bfavaretto提供的JSFiddle jsfiddle.net/BWghm

选择器之前和之后的行为不符合预期

1 个答案: