多个css类奇怪的行为

Question

我有一个这样的课

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

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

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

这不起作用，但确实如此：

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

为什么呢？ 是不是一回事？
由于
不知道css那么好

Answer 1

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

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

Answer 2

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

表示一个带有.info类的元素，它嵌套在.containerrow里面，嵌套在.lifetime

中

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

表示具有类.lifetime，.containerrow和.info

的元素

Answer 3

我假设您要将粗体字体权重应用于多个类：

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

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

使用选择器：.lifetime .containerrow .info，您选择了一个.info类的元素，该类是.containerrow的子元素，而.lifetime的子元素是{{1}}的子元素。< / p>