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 匹配结尾包含指定内容元素