CSS3属性选择器

1、基本介绍

（1）[att*=val]属性选择器

如果元素用att表示的属性的属性值中包含用val指定的字符，则该元素使用这个样式

（2）[att^=val]属性选择器

如果元素用att表示的属性的属性值的开头字符为用val指定的字符，则该元素使用这个样式

（3）[att$=val]属性选择器

如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式

2、实例说明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3属性选择器</title>
<style type="text/css">
[id*=div3]{
background-color:#C00;
}
[id^=div2]{
background-color:#0F0;
}
[id$=div1]{
border:1px solid #00F;
font-size:42px;
}
</style>
</head>
<body>
<div id="div1">
<p>Hello</p>
</div>
<div id="div1_div2">
<p>您好！</p>
</div>
<div id="div1">
<button>查询</button>
</div>
<div id="div2">
<input id="man" type="radio"/>男
<input id="woman" type="radio"/>女
</div>
<div id="div2_div1">
<input type="text" value="姓名"/>
</div>
<div id="div1_div2_div3">
<input type="checkbox"/>篮球
</div>
</body>
</html>

3、实例结果

CSS3属性选择器