css3中的屬性選擇器混淆點


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>對於上面兩種方式都能匹配
css

相關文章
相關標籤/搜索