HTML5&CSS3练习笔记(一)

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

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

 <div>
         <div id="section1">
             完全匹配元素
         </div>
  </div>

HTML代码

 [id=section1]
 {
      background: #eee;
      font-size: 20px;
      color: Red;
 }

CSS代码

效果图如下：

完全匹配元素

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

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

HTML代码

 [id*=tion2]
 {
    background: #eee;
    font-size: 20px;
    color: green;
 }

CSS代码

效果图如下：

匹配包含指定id内容元素

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

 <div>
         <div id="subsection3">
             匹配开头包含指定内容元素-1
         </div>
        <div id="subsection3">
             匹配开头包含指定内容元素-2
         </div>
  </div>

HTML代码

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

CSS代码

效果图如下：

subsection1 匹配开头包含指定内容元素-1

subsection2 匹配开头包含指定内容元素-2

susection3 匹配开头包含指定内容元素-2

4、【attr$=val】匹配结尾包含指定值的元素

 <div>
         <div id="section1sub">
             section1sub匹配结尾包含指定内容元素
         </div>
         <div id="section2sub">
            section2sub 匹配结尾包含指定内容元素
         </div>
         <div id="section3sub">
             section3su 匹配结尾包含指定内容元素
         </div>
  </div>    

HTML代码

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

CSS代码

效果图如下：

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

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

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