以下兩個CSS選擇器有什麼區別？[attribute | = value]和[attribute^= value] CSS選擇器有什麼區別？
[attribute|=value]和[attribute^=value]
在W3Schools，文檔說：
[郎| = EN]選擇具有郎所有元素的屬性初始值與 「EN」
一個[HREF^=「https」]選擇每個
<a>元素，其href屬性值以「https」開頭
「開始於」和「開始於」還是兩個選擇器匹配相同的元素有區別？
MDN has the better description：
[attr|=value]
表示一個具有 attr的屬性名的元素。它的值可以完全是「值」，或者可以從「值」 開始緊跟着「 - 」（U + 002D）。它可以用於語言 子代碼匹配。
[attr^=value]
表示使用attr 的屬性名和其值由「值」爲前綴的元素。
所以[attr|=foo]將匹配attr="foo"或attr="foo-bar"，但不attr="foobar"。
[attr^=foo]另一方面可以匹配任何這些。
如上所述，|=的主要用途是匹配區域/語言代碼，如en-us。請注意，對於特定的語言，您應該使用:lang()，但這更加靈活。
它們是相似的，但略有不同。作爲W3 states管格式：[attribute|=value]
[ATT | = VAL]表示與ATT屬性的元素，它的值 或者確切地說是「VAL」或用「val」立即 隨後開始「 - 」 （U + 002D）。這主要是爲了允許語言 如BCP 47（[BCP47]）或其後繼程序中所述的子代碼匹配（例如HTML中a元素上的hreflang屬性）。對於lang（或 xml：lang）語言子代碼匹配，請參閱：lang 僞類。
因此，匹配具有屬性的元素，其中的值恰好爲val或值以val-開頭。
[attribute^=value]匹配給定屬性僅以value開頭的元素。這將匹配<a href="https://www.google.com">和<a href="https://www.yahoo.com">
考慮搜索除w3school之外的其他網站，如MDN：https：//developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors，他們有更好的信息。 –
這兩個選擇器是不同的（因爲它們指的是不同的屬性） - 但所有其他的東西都是一樣的，請參閱@MikeMcCaughan的鏈接... – ochi