Question

我正在尝试将我的一些CSS结合起来，这是一个简单的问题，但我有点麻烦，我有这个代码：

h2.post-title, h2.post-title a{
    display:block;
    background-color:#000;
    padding:3px;
    color:#ffffff;
    text-decoration:none;
    text-transform:uppercase;
    font:lighter 130% Georgia, Arial;
}

我需要在那里同时拥有这两种选择器吗？我唯一一次使用h2.post-title它将是一个链接。任何建议，我试图删除第一个，但它使它变得巨大。

思想？

Answer 1

如果删除h2字体样式，它将恢复为相当大的默认字体大小。你可以单独设置它：

h2.post-title {
    font-size:130%;
}

但它会占用更多的空间而不是简单地将两个选择器设置为相同的样式。我的建议 - 保持原样，除非你有充分的理由改变它。

Answer 2

问题是“h2.post-title a”仅适用于代码的＆lt; a＆gt; -element。浏览器在＆lt; h2＆gt; -tag！

上使用标准css

让我们看看你的HTML：

<h2 class="post-title"><a href="#">Clickable title</a></h2>

你需要和＆lt; h2＆gt;这两个规则。和＆lt; a＆gt;标签。为此，您需要在样式表中包含 h2 和 a （如您所述）。

解决方案可能是删除您在互联网上找到的许多reset css规则中的＆lt; h2＆gt;的默认样式。

另一个解决方案是将class-spesification从“h2”移到“a”（并且样式只是CSS中的“a.post-title”属性）：

<h2><a class="post-title" href="#">Clickable title</a></h2>

或者您可以完全删除＆lt; h2＆gt; -tag，只需打印出＆lt; a＆gt;。但这可能会破坏你的语义。

结合CSS属性

2 个答案: