CSS 属性选择器不同定义方式的区别

先吐槽一下，从来没有想过自己会有一天进入到开发领域，但是现在真真切切地在学习开发了，造物弄人啊。。。

从 上得知，属性选择器是在 CSS 2 中才引入的。

那么 底部的那一排 [attribute=value] 、[attribute~=value] 又怎么应用呢？从网页上得知，CSS  的属性选择器一共有6种选择方式，经试验，前3种（[attribute] 这个不算）是进行的单词匹配，而后3种主要是进行字母匹配。比如你在 CSS  文件中定义了 [attribute~="test"] {color:red}，在 html 中引用的时候比如是 <p attribute="test"> test </p>，那网页上显示的 test 便是红色，如果你引用的是 <p attribute=“test123”> test </p>，那 test 就是默认的黑色。如果你在 CSS 文件中定义的是 [attribute*="test"] {color:red}，那无论你在 html 中是引用 <p attribute=“test”> test </p> 还是 <p attribute=“test123”> test </p>，那网页中显示的 test 便都是红色。仅做备忘使用，需要验证请自便。