- E[attr]：只使用屬性名，但沒有確定任何屬性值；
- E[attr="value"]：指定屬性名，並指定了該屬性的屬性值；
- E[attr~="value"]：指定屬性名，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“〜”不能不寫；
- E[attr^="value"]：指定了屬性名，並且有屬性值，屬性值是以value開頭的；
- E[attr$="value"]：指定了屬性名，並且有屬性值，而且屬性值是以value結束的；
- E[attr*="value"]：指定了屬性名，並且有屬性值，而且屬值中包含了value；
-
E[attr|="value"]：指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;
爲了更好的說明CSS3屬性選擇器的使用方法，我們把第一節的demo換成別的結構，如下所示：
初步美化一下上面的代碼：
最初效果如下所示：
下面就開始針對上面列出的每個屬性選擇器來，具體分析其使用方法。
一、E[attr]
E[attr]屬性選擇器是CSS3屬性選擇器中最簡單的一種。如果你希望選擇有某個屬性的元素，而不論這個屬性值是什麼，你就可以使用這個屬性選擇器，如：
上面代碼所表示的，選擇了div.demo下所有帶有id屬性的a元素，並在這個元素上使用背景色爲蘭色，前景色爲黃色，字體加粗的樣式，對照上面的html，我們不難發現，只有第一個和最後一個鏈接使用了id屬性，所以選中了這兩個a元素，效果如下所示：
上面是單一屬性的使用，你也可以使用多屬性進行選擇元素，如E[attr1][attr2], 這樣只要是同時具有這兩屬性的元素都將被選中：
不用我說，上面的代碼大家都知道是什麼意思了，他表示的是選擇div.demo下的同時具有href,title兩個屬性的a元素，並且應用相對應的樣式，如下所示：
IE6不支持這個選擇器。
二、Ｅ[attr="value"]
E[attr="value"]選擇器和E[attr]選擇器，從字面上就能很清楚的理解出來，E[attr="value"]是指定了屬性值“value”，而E[attr]只是選擇了有對應的屬性，並沒有明確指其對應的屬性值"value"，這也是這兩種選擇器的最大區是之處。從而縮小了選擇 圍，更能精確選擇自己需要的元素，在前面實例基礎上我們進行一下簡單的修改：
和前面代碼相比較，此處在id的屬性基礎上指定了相應的value值爲“first”,這樣一來我們選中的是div.demo中的a元素，並且這個元素有一個"id="first""屬性值，請看下在的效果圖：
E[attr="value"]屬性選擇器也可以多個屬性並寫，進一步縮小選擇範圍：
效果如下：
對於E[attr="value"]這種屬性值選擇器有一點需要注意：屬性和屬性值必須完全匹配，特別是對於屬性值是詞列表的形式時，如：
上面的代碼，如果你寫成：
上面的屬性選擇器並不會和上在的html匹配,因爲他們的屬性和屬性值沒有完全匹配，需要改成如下所示的代碼，才能正確匹配：
IE6瀏覽器不支持這種選擇器。
三、E[attr~="value"]
如果你想根據屬性值中的詞列表的某個詞來進行選擇元素，那麼就需要使用這種屬性選擇器：E[attr~="value"]，這種屬性選擇器是屬性值是一個或多個詞列表，如果是列表時，他們需要用空格隔開，只要屬性值中有一個value相匹配就可以選中該元素，而我們前面所講的E[attr="value"]是屬性值需要完全匹配纔會被選中，他們兩者區別就是一個有“〜”號，一個沒有“〜”號。我們來看一個這方面的實例：
上面代碼表示的是，div.demo下的a元素的title屬性中，只要其屬性值中含有"website"這個詞就會被選擇，回頭看看我們的html，不難發現所有a元素中“2，6，7，8”這四個a元素的title中都含有,所以被選中，請看效果：
如果我們在上面的代碼中，把那個“〜”號省去，大家看看他們不同之處：
這樣將不會選擇中任何元素，因爲在所有a元素中無法找到完全匹配的"title='website'",換句話說就沒有選中任何元素,這個實例再次證明了E[attr="value"]和E[attr~="value"]之間的區別，和其中“〜”所取的作用，我總結了一句話：屬性選擇器中有波浪（〜）時屬性值有value時就相匹配，沒有波浪（〜）時屬性值要完全是value時才匹配。
IE6不支持E[attr~="value"]屬性選擇器。