在前端工作中，某些時候需要對有指定屬性的元素進行操作，這時候就需要屬性選擇器了。屬性選擇器的符號有些不好記，這裡做個重新整理和小結，詳細的可以參考W3C的官方教程。

假設有這麼一些圖片：

<img src="1.jpg" title="red flower" width="100" height="100">
<img src="2.jpg" title="red-flower" width="100" height="100">
<img src="3.jpg" title="redflower" width="100" height="100">
<img src="4.jpg" title="blue flower" width="100" height="100">
<img src="5.jpg" title="purple flower" width="100" height="100">
<img src="6.jpg" title="two red flowers" width="100" height="100">
<img src="7.jpg" title="two blue flowers" width="100" height="100">
 

（從OneNote貼過來變成圖片了......）

如果在CSS裡面寫

img[title$="flower"]{

  border:2px solid red;

}

這樣，就能給所有title屬性值結尾為“flower”的圖片元素，加上2畫素的實線紅色邊框。