CSS 類別文法中的 `.foo.bar` 和 `.foo .bar` 有什麼不同？

CSS 類語法：.foo.bar 與.foo .bar

在CSS 中，向元素添加類別的語法可能會有所不同，從而導致對其意圖的混淆用法。這個問題解決了以下兩個類別語法之間的差異：

.element .symbol 與.element.large .symbol

解釋

1. .element .symbol：此語法意味著.symbol 類別應用於已經具有.element類別的元素。換句話說，它選擇具有 .element 類別的元素的後代元素。
2. .element.large .symbol：此語法不同。此處，.large 類別附加到 .element 類別。這意味著 .symbol 類別應用於同時具有 .element 和 .large 類別的元素。

範例

為了說明此概念，請考慮以下HTML 和CSS：

<div class="element">
  <div class="symbol"></div>
</div>

<div class="element large">
  <div class="symbol"></div>
</div>

.element .symbol {
  color: red;
}

.element.large .symbol {
  font-weight: bold;
}

在此範例中，.element div 內的第一個.symbol div 將為紅色，而.element 大div 中的第二個.symbol div將同時顯示為紅色和粗體。

結論

兩個類別語法之間的差異在於指定的類別之間的關係。 .foo.bar 選擇具有 bar 類別並且是具有 foo 類別的元素的後代的元素，而 .foo .bar 選擇同時具有 foo 和 bar 類別的元素。

以上是CSS 類別文法中的 `.foo.bar` 和 `.foo .bar` 有什麼不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！