css3中的属性选择器混淆点

2019独角兽企业重金招聘Python工程师标准>>>

css3中较之css2增添了许多属性选择器，一共有如下的集中属性选择器：
（1）E[attr=val]
 (2) E[attr|=val]
 (3) E[attr~=val]
 (4)E[attr*=val]
 (5)E[attr^=val]
 (6)E[attr$=val]
 这几种属性选择器的具体用法我就不赘述了，主要讲讲几点容易混淆的地方
 一：E[attr=val]选择器中，属性和属性值必须完全匹配，特别是对于属性是词列表的形式，例如：
 <a href="#" class="links item"></a>
 其中 a[class="links"]{...}是找不到匹配元素的，只有a[class="links item"]{...}才能匹配到相应的元素
 二：E[attr*=val]和E[attr~=val]辨析：
 这两者有一个相似的地方就是只要要匹配的元素中含有某个元素就行，它们两者很容易发生混淆，但是还是有区别：
 E[attr*=val]匹配的是元素属性值中只要包含“val”字符串就可以了，而E[attr~=val]匹配的是元素属性中要包含“val”，不仅是字符串，例如：a[attr~=links]属性中的links是一个单词，而a[title*=links]中的links不一定是单词，如：
 <a title="linksitem"></a>，该元素只有a[title*links]匹配，但是对于下面的这个例子：
 <a title="links"></a>对于上面两种方式都能匹配

转载于:https://my.oschina.net/sunshinewyf/blog/520311