^="value" 与 |="value"区别？

1. 元素[attribute^=value] : 选择其 src 属性值以 "https" 开头的每个 <a> 元素。

[attribute^=value] 选择其attribute 属性值以 "value" 开头的元素，即属性的前几个字母是value就可以。

例: [class^=test]  {color:red;} 
<p class="test">Hello!</p>
<p class="test_1">Hi!</p>
<p class="test-2">Ello!</p>
<p class="cs_test">Hi!</p>

结果：1,2,3 p标签文字变红。

2. [attribute|=value]: 选择 attribute 属性值以 "value" 开头的所有元素。属性中必须是完整且唯一的单词，或者以-分隔开。

例 :[class|=test]  {color:red;}
<p class="test">Hello!</p>
<p class="test_1">Hi!</p>
<p class="test-2">Ello!</p>
<p class="cs_test">Hi!</p>

结果：1,3 p标签文字变红。