css - 竖线 (|) 和脱字符 (^) 属性选择器有什么区别？

Question

在 W3Schools他们同时声明|和 ^意思是:选择一个属性开始具有指定值的元素。

那么有什么区别呢？

Answer 1

插入符 (^): 选择一个元素 ( <h1> )，其中指定属性 ( rel ) 的值以特定值 ( val ) 开头:

h1[rel^="val"] { /** formatting */ }

h1[rel^="friend"] { color: blue; }

<h1 rel="friend-external-sandwich">I'm Blue.</h1>
<h1 rel="friend2-external-sandwich">I'm Blue.</h1>
<h1 rel="external-sandwich">I'm Black.</h1>

管道 (|): 选择一个元素 (<h1>)，其中指定属性 (rel) 的值恰好是值 (val) 或以值开头紧接着是 - ( val- ):

h1[rel|="val"] { /**formatting */ }

h1[rel|="friend"] { color: red; }

<h1 rel="friend-external-sandwich">I'm Red.</h1>
<h1 rel="friend2-external-sandwich">I'm Black.</h1>

有关此选择器的更多信息，您可以在此处找到:https://css-tricks.com/attribute-selectors/或官方 CSS 规范:https://www.w3.org/TR/css3-selectors/#attribute-selectors