CSS 类和子类

Question

除了我正在做的因为它似乎不起作用之外，是否有可能这样做？我希望能够让某个类下的子类使用专门用于该类的 CSS。子类。

CSS

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

HTML

<div class="area1">
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2"> 
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>

这样我就可以对父 css 类“area1”、“area2”下的元素使用 class="item"。我知道我可以使用 class="area1 item"来让它工作，但我不明白为什么它必须如此冗长。 css子类难道不应该看看它在哪个父类下才能定义吗？

注意:这在 IE 中有效(现在使用 7)，但在 FF 中无效，所以我假设这不是 CSS 标准的做事方式。

Answer 1

只需要加一个空格:

.area2 .item
{
    ...
}