CSS 属性选择器(八)
浏览数：59 /
时间：2015年06月09日
一、属性选择器
属性选择使用中括号进行标识，中括号内包含属性名，属性值或者属性表达式
如h1[title],h1[title="Logon"],
二、属性选择器分类
2.1、匹配属性名
[class]{color:red}
作用于任何带有class属性的元素，不管理class的值是什么，也可以是其它元素的所有合法属性如：
img[alt]{border:none};
上面这个会作用于所有带有alt属性的img元素
a[href][title]{font-weight:bold};作用于同时带有href和title属性的a元素
2.2、匹配属性值
只有当属性完全匹配指定的属性值时，才会应用样式。
a[href="http://www.baidu.com/"][title="css"]{font-size:12px;} 作用于连接指向http://www.baidu.com/同时title=css的a元素设置字体为12px; <a href="http://www.baidu.com/" title="css">百度一下</a>
也可以综合使用多个条件
div[id][title="ok"]{color:blue;font-style:italie;}作用于有id属性同时title=ok的div元素
2.3、前缀匹配
只要属性值的开始字符匹配指定字符串，即可对元素应用样式。前缀匹配选择器使用[^=]的形式
<div class="Mytest">前缀匹配</div> 使用下面来匹配 [class^="My"]{ color:red; }
只要class开头为My的元素都可以应用这个样式
2.4、后缀匹配
后缀匹配选择器使用[$=]的形式
<div class="Mytest">后缀匹配</div> 使用下面来匹配 [class$="test"]{ color:red; }
只要class结尾为test的元素都可以应用这个样式
2.5、模糊匹配
模糊匹配选择器使用[*=]的形式
<div class="Mytest">模糊匹配</div> 使用下面来匹配 [class*="est"]{ color:red; }
只要class中有属性中包含est字符串就可以应用这个样式
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
