首页 > 代码库 > HTML5&CSS3练习笔记(一)
HTML5&CSS3练习笔记(一)
属性选择器的用法 格式：[属性/^/*/$=值]
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 }
效果图如下：
<style></style>完全匹配元素
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 }
效果图如下：
<style></style>匹配包含指定id内容元素
3、【attr^=val】匹配开头包含指定值的元素
1 <div>2 <div id="subsection3">3 匹配开头包含指定内容元素-14 </div>5 <div id="subsection3">6 匹配开头包含指定内容元素-27 </div>8 </div>
[id^=sub]{ background: #eee; font-size: 20px; color: blue;}
效果图如下：
subsection1 匹配开头包含指定内容元素-1
subsection2 匹配开头包含指定内容元素-2
susection3 匹配开头包含指定内容元素-2
4、【attr$=val】匹配结尾包含指定值的元素
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 }
效果图如下：
section1sub匹配结尾包含指定内容元素
section2sub 匹配结尾包含指定内容元素
section3su 匹配结尾包含指定内容元素
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。