CSS属性选择器小结

在前端工作中，某些时候需要对有指定属性的元素进行操作，这时候就需要属性选择器了。属性选择器的符号有些不好记，这里做个重新整理和小结，详细的可以参考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">

下面使用CSS属性选择器对这些图片进行选择：

（从OneNote贴过来变成图片了......）

如果在CSS里面写

img[title$="flower"]{

  border:2px solid red;

}

这样，就能给所有title属性值结尾为“flower”的图片元素，加上2像素的实线红色边框。

PS：本人博客www.yemaoteng.com