CSS-attribute-selector 屬性選取器

用來指定HTML元素屬性的CSS樣式
對於不包含 class 與 id 屬性的 XML文件 特別有用

E[attr]

elemen[attribute]{ properties }

img[title] { border: 1px solid red; }

<img src="first.jpg" alt="" title='first'>  // 會應用到css樣式
<img src="second.jpg" alt="">

E[attr=val]（必須完全相等）

elemen[attribute='value']{ properties }

img[title='first'] { border: 1px solid red; }

<img src="first.jpg" alt="" title='first'>  // 會應用到css樣式
<img src="second.jpg" alt="" title='second'>

E[attr~=val]（部分相等即可）

elemen[attribute~='value']{ properties }

img[title~='img'] { border: 1px solid red; }

<img src="first.jpg" alt="" title='first img'>    // 會應用到css樣式
<img src="second.jpg" alt="" title='second img'>  // 會應用到css樣式

E[attr|=val]（必須等於 value 或 value-）

elemen[attribute|='value']{ properties }

img[title|='img'] { border: 1px solid red; }

<img src="first.jpg" alt="" title='img'>          // 會應用到css樣式
<img src="second.jpg" alt="" title='img-second'>  // 會應用到css樣式

E[attr^=val]（屬性開頭必須是 value）

elemen[attribute^='value']{ properties }

img[title^='img'] { border: 1px solid red; }

<img src="first.jpg" alt="" title='first img'>
<img src="second.jpg" alt="" title='img second'>  // 會應用到css樣式

E[attr$=val]（屬性結尾必須是 value）

elemen[attribute$='value']{ properties }

img[title$='img'] { border: 1px solid red; }

<img src="first.jpg" alt="" title='first img'>    // 會應用到css樣式
<img src="second.jpg" alt="" title='img second'>

E[attr*=val]（屬性值必須包含value）

elemen[attribute*='value']{ properties }

img[title*='img'] { border: 1px solid red; }

<img src="first.jpg" alt="" title='first img'>    // 會應用到css樣式
<img src="second.jpg" alt="" title='second'>