CSS3属性选择器 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3属性选择器</title>
    <style>
        [id*=section]{
            background: #000;
        }
        [id^=s]{
            background: cornflowerblue;
        }
        [id$=c]{
            background: green;
        }
        [id$=\-1]{
        background: saddlebrown;
        }
        [id$=\_2]{
            background: red;
        }
        a[href$=html]:after{
            content: "网页文件";
            color: green;
        }
        a[href$=jpg]:after{
            content: "图片文件";
            color: green;
        }
    </style>
</head>
<body>
    <div id="section1-1">section1-1</div>
    <div id="section1-1-1c">section1-1-1c</div>
    <div id="section2_2">section2-2</div>
    <a href="anli.html">网站首页</a><br/>
    <a href="1.jpg">网站图片</a><br/>
</body>
</html>
demo.html

[att*=val]

　　用att表示的属性的属性值字符包含val时,该元素使用该样式

[att^=val]

　　用att表示的属性的属性值开头字符为val时,该元素使用该样式

[att$=val]

　　用att表示的属性的属性值结尾字符为val时,该元素使用该样式

 

val如果是  连接符+数字  此类的,那么前面要加 \ 才行

　　

posted @ 2018-01-12 13:51  苹瑶  阅读(141)  评论(0)  编辑  收藏  举报