什么是属性选择器?
●属性选择器它是与标签的属性名和属性值有关。
●属性选择器是通过标签的属性名和属性值来匹配元素。
attr是英文单词“attribute”的简写,中文意思“属性” 属性名
val是英文单词“value”的简写,中文意思是“值” 属性值
选择器 | 含义 | 举例 |
---|---|---|
[attr] | 匹配所有具有attr属性的元素,不考虑它的值 | h1[align]{...} input[type][size]{...} |
[attr="val"] | 匹配所有attr属性值等于val的元素 | h1{align="center"}{...}属性值一般加引号 |
[attr^="val"] | 匹配元素中attr属性以指定值开头的所有元素 | font[color^="#q"] |
[attr$="val"] | 匹配元素中attr属性以指定值结尾的所有元素 | font[color$="#w"] |
[attr*="val"] | 匹配元素中attr属性中包含指定值的所有元素 | font[color*="#e"] |
举例: p[align]{color:#00f;}
先找到p标签,然后再来判断p标签里面是否有align这个属性,如果就匹配,没有就匹配不到
举例: font[color^="#q"]
先找到font标签然后再来匹配color的属性值以#q开头的元素