如何組合 CSS 中的類別和 ID 選擇器來定位特定的 HTML 元素？

在 CSS 選擇器中組合類別和 ID

設計 HTML 元素樣式時，通常使用類別和 ID 來定位特定元素。在某些情況下，您可能需要結合這兩個標準。以下是如何實現這一點：

使用ID 和Class 查詢元素

考慮以下HTML：

<div>
<p>要設定此元素的樣式，例如它同時具有“sectionA”類別和“content”ID，請使用下列CSS選擇器：</p>
<pre class="brush:php;toolbar:false">div#content.sectionA

在此選擇器中，「#」符號位於 ID 之前，而「.」位於 ID 之前。符號位於類別之前。這可確保 CSS 規則僅適用於滿足這兩個條件的元素。

附加說明

請記住，選擇器中類別和 ID 的順序很重要。如果您編寫“.sectionA#content”，它將選擇具有“sectionA”類別和任何 ID 的元素，不一定是“內容”。

替代方法

使用上述技術，您可以組合多個類別或多個 ID。但是，還有其他方法可以避免長選擇器：

1. 連接類別： 連接類別名稱（例如“content-sectionA”或“sectionA-content”）以建立唯一的類。這將選擇器簡化為“.content-sectionA”或“.sectionA-content”。
2. 使用子選擇器：如果該類別應用於子元素，您可以使用“> ;”選擇器中的符號，例如：“div#content > p.sectionA.”