CSS 属性选择器(八)

一、属性选择器

属性选择使用中括号进行标识，中括号内包含属性名，属性值或者属性表达式

如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字符串就可以应用这个样式