html - 选择器前后的行为不符合预期

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 显示一切都按应有的方式设置。但是，我在页面上看到的有点不同。

首先，根据样式表设置的 > 和 < 符号不是出现在 ID 为 verdesc 的 h1 之前和之后，而是出现在 ID 为 'clickto' 的 span 之前和之后，即它的直接子级。 Firebug 清楚地表明“点击”类是在父级而不是子级上设置的。

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

Answer 1

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

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

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

其他的也修复了间距问题:

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

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

参见 JSFiddle jsfiddle.net/BWghm由 bfavaretto 提供