CSS屬性選擇器小結
阿新 • • 發佈:2018-12-25
在前端工作中,某些時候需要對有指定屬性的元素進行操作,這時候就需要屬性選擇器了。屬性選擇器的符號有些不好記,這裡做個重新整理和小結,詳細的可以參考W3C的官方教程。
假設有這麼一些圖片:
下面使用CSS屬性選擇器對這些圖片進行選擇:<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畫素的實線紅色邊框。