在 W3 Schools 选择器中他们写的参考文献
[attribute|=value] [lang|=en]
选择所有具有以“en”开头的 lang 属性值的元素
[attribute^=value] a[href^="https"]
选择 href 属性值以 https 开头的每个 <a> 元素
那么如果他们都选择一个以单词开头的元素，他们之间有什么区别呢？
【问题讨论】：
标签： css
您可以自己检查差异。他们都从某个值开始寻找属性值。但是，使用 |= 您需要选择整个单词（或由连字符分隔的单词 - 与下一个单词）。示例：
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
[class^="top"] 将选择其中三个。
[class|="top"] 将只选择前两个元素。最后一个<p> 具有topcontent 类，因此选择器不会找到孤立词top
【讨论】：
<div class="first_block"> <div class="block active"> <div class="other-block"> <p class="myblock"> [class*="block"] 将选择所有元素。 [class~="block"] 将只选择第二个元素（类“block”）
您可以（通常）在 Mozilla web docs 或 W3C Recommendation 中找到更详细的文档，这应该是浏览器实现的基础。
[attr|=value]
表示属性名为 attr 的元素，其值可以是 精确值或可以以 value 开头，紧跟 a 连字符，- (U+002D)。常用于语言子码匹配。
表示它匹配value 或value-more-text（值后跟-）
[attr^=value]
表示属性名为 attr 的元素，其值为 按值加前缀（在前面）。
意味着它比之前的选择器更宽松，因为它匹配以value 开头的属性，并且后面可以跟任何其他字符。
【讨论】：