HTML5&CSS3练习笔记(一)

属性选择器的用法 格式：[属性/^/*/$=值]

1、【attr=val】 匹配指定值的元素

1 <div>
2         <div id="section1">
3             完全匹配元素
4         </div>
5  </div>

HTML代码

1 [id=section1]
2 {
3      background: #eee;
4      font-size: 20px;
5      color: Red;
6 }

CSS代码

效果图如下：

完全匹配元素

2、【attr*=val】匹配包含指定内容的元素，例子为设置id包含tion2的样式

1 <div>
2         <div id="section2">
3             匹配包含指定id元素</div>
4 </div>

HTML代码

1 [id*=tion2]
2 {
3    background: #eee;
4    font-size: 20px;
5    color: green;
6 }

CSS代码

效果图如下：

匹配包含指定id内容元素

3、【attr^=val】匹配开头包含指定值的元素

1 <div>
2         <div id="subsection3">
3             匹配开头包含指定内容元素-1
4         </div>
5        <div id="subsection3">
6             匹配开头包含指定内容元素-2
7         </div>
8  </div>

HTML代码

[id^=sub]
{
    background: #eee;
    font-size: 20px;
    color: blue;
}

CSS代码

效果图如下：

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>    

HTML代码

1 [id$=sub]
2 {
3     background: #eee;
4     font-size: 20px;
5     color: gray;
6 }

CSS代码

效果图如下：

section1sub匹配结尾包含指定内容元素

section2sub 匹配结尾包含指定内容元素

section3su 匹配结尾包含指定内容元素

HTML5&CSS3练习笔记(一)