为什么这个CSS代码没有按预期工作？

Question

有人可以告诉我为什么以下我的CSS代码不起作用？我完全不知道为什么，这不是我的第一个牛仔竞技表演。

我已将以下代码添加到CSS文件的 END ，以确保没有其他内容会覆盖它：

address,
span,
.gStyle {
    font-weight:bold;
    font-size:small;
    text-transform:capitalize;
}

.gStyle .ngs address {
    color: red;
    font-size: 10px;
}

.gStyle .sgs span {
    color: black;
    font-size: 12px;
}

我在代码中调用了类，如下所示：

<address class="ngs">lorem ipsum</address>
<span class="sgs">lorem ipsum</span>

但我期望发生的是

中的内容

• address将以BOLD + CAPITALIZED + RED + 10PX及其中的内容返回，
• span会以BOLD + CAPITALIZED + BLACK + 12PX回来，而任何直接致电，
• gStyle将返回BOLD + SMALL + CAPITALIZED。

这没有发生，所以我做错了什么？我编码的时间太长，看不出有什么不对，但我也是一个足够大的人说，嘿，你一定要错过一些东西，所以问。

编辑 - 澄清

实际上我需要的是，当我将CLASS="ngs"应用于任何元素时，但至少要ADDRESS，它将应用gStyle中的两种样式。基本样式，但也应用ngs其他样式。我尝试使用CLASS="gStyle ngs"，但这也不起作用。同样的逻辑也适用于sgs所以你能告诉我我在做什么错了吗？我很抱歉这不太清楚，我认为预测结果与HTML片段一起就足够了。

Answer 1

.gStyle .ngs address在address元素中的.ngs元素中选择.gStyle元素。

看起来您需要一个address元素 .ngs元素中的.gStyle元素，这将构成您的代码：

.gStyle address.ngs

跨度相同：

.gStyle span.sgs

Answer 2

有几个问题。

.gStyle .ngs address {
    color: red;
    font-size: 10px;
}

此代码块将定位具有address类的元素中的所有.ngs标记，该类位于具有.gStyle类的元素内。你的跨度也是如此。类名之间的空格表示两个类之间的父子关系。

要定位当前的HTML标记，应该是：

.gStyle address.ngs {
    color: red;
    font-size: 10px;
}

这假设您的<address>位于具有.gStyle类的元素中。 跨度也是如此。