透過多個屬性比對最佳化 CSS 選擇器
在 CSS 中,屬性選擇器可以根據 HTML 元素的屬性精確選擇它們。處理多個屬性時,可能會出現以下查詢:
問: 如何選擇同時具有特定屬性名稱和值的 HTML 元素?例如,我想使用“name=Sex”和“value=M”來定位輸入元素。
A: 要匹配 CSS 選擇器中的多個屬性,只需將屬性選擇器附加為他們想要的名稱和值對。在您的範例中,正確的語法是:
input[name=Sex][value=M]
此選擇器將選擇具有「name=Sex」和「value=M」屬性的輸入元素。其他具有不同屬性的輸入元素,例如「name=Sex」和「value=F」將不會被選取。
W3C 標準對多個屬性選擇器進行了進一步闡述:「多個屬性選擇器可用於引用一個元素的多個屬性,甚至多次引用同一屬性。」
例如,此選擇器針對SPAN 元素,其中“hello”屬性等於“Cleveland”,且"goodbye" 屬性等於"Columbus":
span[hello="Cleveland"][goodbye="Columbus"]
請注意,如果屬性值不是有效標識符,則需要在屬性值兩邊加上引號。
總而言之,使用多個屬性選擇器可以讓您透過將元素與特定屬性組合相匹配來精確地細化 CSS 選擇器。
以上是如何在 CSS 中選擇具有多個特定屬性的 HTML 元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!