CSS3 選擇器 屬性選擇器（複習）

2021-09-01 19:06:16 字數 1720 閱讀 1745

e[attr]：只使用屬性名，但沒有確定任何屬性值；

.demo a[id]  


.demo a[href][title]

e[attr="value"]：指定屬性名，並指定了該屬性的屬性值；

.demo a[id="first"] 


.demo a[href=""][title]
對於e[attr="value"]這種屬性值選擇器有一點需要注意：屬性和屬性值必須完全匹配，特別是對於屬性值是詞列表的形式時，如：
7
例如上面的**，如果你寫成：
.demo a[class="links"];/*這是一種寫法不能和上面的html所匹配*/

e[attr~="value"]：指定屬性名，並且具有屬性值，此屬性值是乙個詞列表，並且以空格隔開，其中詞列表中包含了乙個value詞，而且等號前面的「〜」不能不寫；

.demo a[title~="website"]
這個例項再次證明了e[attr="value"]和e[attr~="value"]之間的區別，和其中「〜」所取的作用，我總結了一句話：屬性選擇器中有波浪（〜）時屬性值有value時就相匹配，沒有波浪（〜）時屬性值要完全是value時才匹配。e[attr^="value"]：指定了屬性名，並且有屬性值，屬性值是以value開頭的；
.demo a[href^="http://"]


.demo a[href^="mailto:"]

e[attr$="value"]：指定了屬性名，並且有屬性值，而且屬性值是以value結束的；

.demo a[href$="png"]

e[attr*="value"]：指定了屬性名，並且有屬性值，而且屬值中包含了value；

.demo a[title*="site"]

e[attr|="value"]：指定了屬性名，並且屬性值是value或者以「value-」開頭的值（比如說zh-cn）;

.demo a[lang|="zh"]

有關於屬性選擇器就上面這些內容了，屬性選擇器除了ie6不支援外，其他的瀏覽器都能支援，這樣一來，如果你在你的頁面上使用了屬性選擇器，而且你需要處 理ie6相容問題，那你就需要確保ie6用別的方法來實現或者你應該確保ie6使用者將能獲得乙個可用的頁面。七種屬性選擇器中e[attr="value"] 和e[attr*="value"]是最實用的，其中e[attr="value"]能幫我們定位不同型別的元素，特別是表單form元素的操作，比如說 input[type="text"],input[type="checkbox"]等，而e[attr*="value"]能在**中幫助我們匹配不 同型別的檔案，比如說你的**上不同的檔案型別的鏈結需要使用不同的icon圖示，用來幫助你的**提高使用者體驗，就像前面的例項，可以通過這個屬性 給".doc",".pdf",".png",".ppt"配置不同的icon圖示。

原文：/css3/attribute-selectors

CSS3選擇器 屬性選擇器

指定屬性名，但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名，並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名，具...

CSS3 選擇器 屬性選擇器

屬性選擇器早在css2中就被引入了，其主要作用就是對帶有指定屬性的html 元素設定樣式。使用css3屬性選擇器，你可以只指定元素的某個屬性，或者你還可以同時指定元素的某個屬性和其對應的屬性值。選擇有某個屬性的元素，而不管這個屬性的值是什麼。選擇有某個屬性的元素，並且要求這個元素的屬性的屬性值只能為...

Css3選擇器 屬性選擇器

一 e attr e attr 屬性選擇器是css3屬性選擇器中最簡單的一種。如果你希望選擇有某個屬性的元素，而不論這個屬性值是什麼，你就可以使用這個屬性選擇器 ie6不支援這個選擇器。二 attr value e attr value 選擇器和e attr 選擇器，從字面上就能很清楚的理解出來，e...