标签：style blog http color os io art ar
属性选择器的用法 格式：[属性/^/*/$=值]
1、【attr=val】 匹配指定值的元素
1 <div> 2 <div id="section1"> 3 完全匹配元素 4 </div> 5 </div>
1 [id=section1] 2 { 3 background: #eee; 4 font-size: 20px; 5 color: Red; 6 }
效果图如下：
2、【attr*=val】匹配包含指定内容的元素，例子为设置id包含tion2的样式
1 <div> 2 <div id="section2"> 3 匹配包含指定id元素</div> 4 </div>
1 [id*=tion2] 2 { 3 background: #eee; 4 font-size: 20px; 5 color: green; 6 }
效果图如下：
1 <div> 2 <div id="subsection3"> 3 匹配开头包含指定内容元素-1 4 </div> 5 <div id="subsection3"> 6 匹配开头包含指定内容元素-2 7 </div> 8 </div>
[id^=sub] { background: #eee; font-size: 20px; color: blue; }
效果图如下：
1 <div> 2 <div id="section1sub"> 3 section1sub匹配结尾包含指定内容元素 4 </div> 5 <div id="section2sub"> 6 section2sub 匹配结尾包含指定内容元素 7 </div> 8 <div id="section3sub"> 9 section3su 匹配结尾包含指定内容元素 10 </div> 11 </div>
1 [id$=sub] 2 { 3 background: #eee; 4 font-size: 20px; 5 color: gray; 6 }
效果图如下：
HTML5&CSS3练习笔记(一),布布扣,bubuko.com
标签：style blog http color os io art ar
原文地址：http://www.cnblogs.com/AlphaThink-AT003/p/3898993.html
