HTML5&CSS3练习笔记(一)

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

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

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

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

效果图如下：

完全匹配元素

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

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

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

效果图如下：

匹配包含指定id内容元素

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

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

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

效果图如下：

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>    

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

效果图如下：

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

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

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