CSS 类和子类答案

【问题标题】：CSS Classes & SubClassesCSS 类和子类
【发布时间】：2009-02-17 21:07:13
【问题描述】：

除了我正在做的因为它似乎不起作用之外，是否有可能这样做？我希望能够拥有一个类下的子类，以便专门为该 class.subclass 使用 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>

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

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

【问题讨论】：

标签： css

【解决方案1】：

只需要加一个空格：

.area2 .item
{
    ...
}

【讨论】：

我自己并没有真正使用子类......谁能给我一个需要这样做的理由？
子类只是在适当的地方为您的 CSS 规则添加额外特异性的另一种方式。您可以拥有一个主类，但您可以根据元素在文档中的位置更改元素的规则。

【解决方案2】：

仅供参考，当您像上面那样定义规则时，将两个选择器链接在一起：

.area1.item
{
    color:red;
}

意思是：

将此样式应用于同时具有“area1”和“item”类的任何元素。

如：

<div class="area1 item">

遗憾的是它在 IE6 中不起作用，但这就是它的意思。

【讨论】：

这实际上是我要找的东西，谢谢你的解释！
我知道这是古老的，但你的意思是“area1”还是“item”而不是“area1”和“item”？这有很大的不同。
非常感谢，我正在绞尽脑汁想办法解决这个问题。

【解决方案3】：

您的问题似乎是 CSS 中两个类之间缺少空格：

.area1.item
{
    color:red;
}

应该是

.area1 .item
{
    color:red;
}

【讨论】：

【解决方案4】：

你想强制只选择孩子吗？ http://css.maxdesign.com.au/selectutorial/selectors_child.htm

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

【讨论】：

不是我的想法，但如果我只想要直接的孩子，这是一个很好的信息。谢谢！
不知道那个。谢谢克里斯特先生

【解决方案5】：

只需在 .area1 和 .item 之间放一个空格，例如：

.area1 .item
{
    color:red;
}

这种样式适用于类 item 位于类 area1 的元素中的元素。

【讨论】：

【解决方案6】：

在你的类之间留一个空格

.area1 .item
{
    ...
}

这是CSS Selectors 的一个很好的参考。

【讨论】：

【解决方案7】：

根据上面kR105的回复：

我的问题类似于OP（原始海报）的问题，只发生在表之外，所以子类不是从父类（表）范围内调用的，而是在它之外，所以我有添加选择器，如 kR105 所述。

问题出在这里：我有两个框（div），每个框都具有相同的边框半径 (HTML5)、填充和边距，但需要使它们具有不同的颜色。而不是为每个颜色类重复这 3 个参数，我想要一个“超类”来包含边框半径/填充/边距，然后只是单独的“子类”来表达它们的差异（每个都用双引号括起来，因为它们不是真正的子类 -看我后面的帖子）。结果如下：

HTML：

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

CSS：

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

希望有人觉得这很有帮助。

【讨论】：

【解决方案8】：

这是 CSS 的支柱，Cascading 样式表中的“级联”。

如果您将 CSS 规则写在一行中，则更容易查看结构：

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

使用多个类也是 CSS 的一种很好的中级/高级用法，不幸的是，有一个众所周知的 IE6 错误限制了编写跨浏览器代码时的这种用法：

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 IGNORES 多类规则中的第一个选择器，所以 IE6 实际上将 .area1.larger 规则应用为

/*.area1*/.larger { ... }

意味着它将影响所有 .larger 元素。

如果你想要一个干净的跨浏览器 CSS 文件，这是 IE6 中一个非常讨厌和不幸的错误（其中之一），它迫使你几乎从不使用 CSS 的该功能。

然后解决方案是使用 CSS 类名前缀来避免与通用类名冲突：

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

也可以只使用一个类，但这样您可以将 CSS 保持在您想要的逻辑中，同时知道 .area1Larger 只会影响 .area1 等。

【讨论】：

【解决方案9】：

例如，您在 div 上应用的类可用作使用该 div 样式元素的参考点。

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


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

为了获得超级语义，您应该将类移到桌子上。

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

【讨论】：

【解决方案10】：

你也可以像这样在一个元素中有两个类

<div class = "item1 item2 item3"></div>

类中的每个项目都是它自己的类

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

【讨论】：

【解决方案11】：

kR105 写道：

你也可以像这样在一个元素中有两个类

<div class = "item1 item2 item3"></div

我看不出这个的价值，因为按照层叠样式的原则，最后一个优先。例如，如果在我之前的示例中，我将 HTML 更改为读取

 <div class="box1 box2"> Hello what is my color? </div>

框的边框和文本将是蓝色的，因为 .box2 的样式分配了这些值。

另外，在我之前的帖子中，我应该强调，像我所做的那样添加选择器与在类中创建 subclass 不同（此线程中的第一个解决方案)，虽然效果差不多。

【讨论】：