0

我有以下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”类设置为“单击”。Firebug 显示一切都按应有的方式设置。但是，我在页面上看到的有点不同。

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

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

4

1 回答 1

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

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

将修复符号不变，因为 id 和 class 位于同一元素上，而不是其子元素之一，因此没有空间。

其他的也解决了间距问题：

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

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

请参阅由bfavaretto提供的 JSFiddle jsfiddle.net/BWghm

于 2012-08-08T22:26:56.400 回答