為什么此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類的元素內。 跨度也一樣。