js学习-css3新增的属性选择器_cs3新属性有哪些增加了更多的css选择器 js-CSDN博客

本文链接：https://blog.csdn.net/weixin_48235555/article/details/106461494

一、[att* = val]属性选择器
包含用val指定的字符

二、[att^ = val]属性选择器
开头字符用val指定的字符

三、[att$ = val]属性选择器
结尾字符用val指定的字符

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3中的属性选择器</title>
    <style>
        /*[id*= section1]{*/
            /*background: green;*/
        /*}*/
        /*[id*= section2]{*/
        /*background: #ff6600;*/
        /*}*/
        /*[id*=section1-1]{*/
            /*background: goldenrod;*/
        /*}*/
        /*[id*=section]{*/
            /*background: #000;*/
        /*}*/
        /*[id^=s]{*/
            /*background: cornflowerblue;*/
        /*}*/
        /*[id^=b]{*/
            /*background: hotpink;*/
        /*}*/
        [id$=c]{
            background: green;
        }
        /* 如果结尾为“-1”“-2”...则要加“\” */
        /* 如果结尾为"_1""_2"...则加不加"\"都可以 */
        [id$=\-1]{
            background: saddlebrown;
        }
        [id$=n2]{
            background: red;
        }
    </style>
</head>
<body>
<h1>CSS3中的属性选择器</h1>
<div id="section1a">sectiona</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_3">section2-2</div>
</body>
</html>