感谢
https://www.runoob.com/css/css-attribute-selectors.html 的底部评论
https://www.runoob.com/cssref/css-selectors.html
虽然一直有用到属性选择器,但是缺乏全面的了解,都是用到了就百度,看到一个大佬的总结评论,做个记录
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
"value 是完整单词" 类型的比较符号: ~=, |=
意思就是独立单词的时候用
"拼接字符串" 类型的比较符号: *=, ^=, $=
意思是包含、开头、结尾的时候用
1.attribute 属性中包含 value:
[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
2.attribute 属性以 value 开头:
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en] --> <p lang="en"> <p lang="en-us">
[attribute^=value] 属性的前几个字母是 value 就可以，例如：
[lang^=en] --> <p lang="ennn">
3.attribute 属性以 value 结尾:
[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"]
