属性选择器

CSS 权威指南笔记 /

回顾#

前面介绍了三种选择器，元素选择器、类选择器、ID 选择器。
类选择器（.）与 ID 选择器（#），以元素的 class、id 属性值选择元素。那么，类选择器和 ID 选择器不也属于属性选择器吗？不是的，它们所做的实际上只是选择属性的值。
此节介绍的之所以叫 “属性选择器”，是以属性本身选择元素。如

a[title] {color:red;}
<a title="attribute" alt="" href="">attribute</a>

简单属性选择#

[] 号我理解的是 “包含” 的意思。选择包含某属性的元素。

*[title] {} /*所有包含 title 属性的元素*/
a[title][href] {} /*同时有 title 和 href 的元素*/

属性值选择#

完全匹配

input[name="city"]{ }

<input name="province">
<input name="city">

还有几种和属性值不完全匹配的写法，

<img title="Love you" src="">
<img title="Smile-every-day" src="">
<img title="Take you around the world" src="">

img[title ~= "love"] {} /*匹配空格分隔的包含 love 的元素*/
img[title ^= "Smile" ]{} /*以 Smail 开头的元素*/
img[title $= "world"]{} /*以world结尾的元素*/
img[title *= "you"]{} /*包含you字符串的所有元素*/