多个css类奇怪的行为答案

【问题标题】：multiple css classes weird behavior多个css类奇怪的行为
【发布时间】：2012-10-18 08:24:05
【问题描述】：

我上过这样的课

.lifetime .containerrow
{
    text-align: center;
    height: 20px;
}

我需要将某些元素中的文本加粗，所以我这样做了：

.lifetime .containerrow .info
{
    font-weight:bold;
}

这没用，但确实有效：

.lifetime.containerrow.info
{
    font-weight:bold;
}

为什么？不是一样的吗？
谢谢
不太懂css

【问题讨论】：

在第一种情况下，您将 de 样式应用于类信息，该类信息使用类 containerrow 进入另一个元素，该类使用类生存期进入另一个元素。在第二种情况下，您将样式应用于具有三个类的元素。
我在您的问题ACCIDENTALLY!!!!! 中找到了answer 谢谢

【解决方案1】：

这是正确的行为。 .class1.class2.class3 匹配具有所有三个类的元素。 .class1 .class2 .class3 匹配 .class3 元素内 .class2 元素内 .class1 元素内。

如果你想对三个不同的类应用相同的样式，你需要用逗号分隔它们（例如.class1, .class2, .class3 { font-weight: bold; }）

【讨论】：

【解决方案2】：

.lifetime .containerrow .info
{
    font-weight:bold;
}

表示一个.info 类的元素嵌套在.containerrow 中，而.containerrow 又嵌套在.lifetime 中

.lifetime.containerrow.info
{
    font-weight:bold;
}

表示具有 .lifetime、.containerrow 和 .info 类的元素

【讨论】：

【解决方案3】：

我假设您想对多个类应用粗体字重：

.lifetime,
.containerrow,
.info
{
    font-weight:bold;
}

您必须用逗号分隔类以在不同元素上选择不同的类，但应用相同的样式。

使用选择器：.lifetime .containerrow .info，您选择了一个具有 .info 类的元素，该类是 .containerrow 的子级，而 .lifetime 的子级。

【讨论】：