61,115
社区成员
发帖
与我相关
我的任务
分享[attribute|=value]和[attribute^=value]这两个CSS选择器有什么区别？
[attribute|=value]：[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]：a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
看了w3school是上面的解释，但是看来看去都是选择以某个单词开头的元素，难道真的没有区别吗？没有区别的话为什么还要搞两个出来，唯一不太一个的就是前面一个是CSS2的，后面一个是CSS3的，其它看不出区别
[attribute^=value]：a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
看了w3school是上面的解释，但是看来看去都是选择以某个单词开头的元素，难道真的没有区别吗？没有区别的话为什么还要搞两个出来，唯一不太一个的就是前面一个是CSS2的，后面一个是CSS3的，其它看不出区别
...全文
请发表友善的回复…
发表回复
u010313644 2017-02-03
- 打赏
- 举报
在w3school中试过，[attribute^=value] [attribute|=value] ^只要属性值中开头是value就可以，比较宽松，但|就非常严格了必须是以value值开头，同时后面必须是中划线”-“，绝对不能是下划线”_“，要不就识别不出来
qq2460857094 2016-11-18
- 打赏
- 举报
谢谢楼上两位，忘记结帖了
YLIME_E 2016-09-02
- 打赏
- 举报
[property^=value] 中的value 可以是任意字符 不是单词也没关系
比如 a[class^="mar"] 是有效的
YLIME_E 2016-09-02
- 打赏
- 举报
[attribute|=value] 这种情况下 value必须是整个单词
比如 a[class|="margin"] 是ok的 如果写成a[class|="mar"] 就失效
YLIME_E 2016-09-02
- 打赏
- 举报
一共是四种种：
a[href="http://www.baidu.com"] 选择href值等于"http://www.baidu.com"的所有a标签。
a[href*="css"] 选择href值里包含"css"字符的所有a标签
a[href^="http"] 选择href值里以"http“字符开头所有a标签
a[href$="php"] 选择href值里以"php"字符结尾的所有a标签
hookee 2016-08-16
- 打赏
- 举报
|=xx 是 匹配 xx或 xx开头后面接-的字符串，比如 xx-nnn ，而不会匹配 xxnnn。 可用于语言 en, en-uk
