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字符串的所有元素*/总结
- 元素本身作为选择器
h1 {} - 属性本身作为选择器
h1[title] - 属性和属性值作为选择器
h1[title="abc"] - 属性值作为选择器
.red {}#app {}
关于 LearnKu
粤公网安备 44030502004330号