属性选择器

2020-04-11 22:00:12 阅读：137 来源： 互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>property table</title>
    <style>
        [class="c1"]{color: red} /*属性值*/

        [alex]{color: yellow} /*自己添加的属性名称*/

        p[class="p1"]{color: blue} /*标签加属性值*/

        div[class="c4"]{color: blue}

        div[id="id1"]{background: blue}

        .div5{font-size: 50px}   /*下面class的div5，div6会添加两个属性*/
        .div6{color:darkmagenta}
        [class~="div7"]{font-size: 58px;color: red} /*只要有一个div7的就赋值*/

        [class^="div10"]{font-size:55px;color: red}/*以div10开头*/
        [class$="div15"]{font-size:55px;color: red}/*以div15结尾*/

        [class*="div16"]{font-size: 50px;color: red} /*包含div16*/

        /*before,after添加前后添加内容*/
        p:before{content:"前面"}
        p:after{content:"后面"}
        [jj]{font-size: 199px}  /*<p>自定义属性*/

    </style>

</head>
<body>
    <div class="c1">div1</div>
    <p class="p1">p1</p>
    <div class="c2"  alex="jm">div2</div>
    <div class="c3">div3</div>
    <div class="c4">div4</div>
    <div id="id1">div4</div>

    <div class="div5 div6">div5</div>
    <div class="div7 div8">div7</div>
    <div class="div7 div9">div8</div>

    <div class="div10 div11">div10</div>
    <div class="div12 div15">div11</div>

    <div class="div16div17">div12</div>

    <p id="ppp" jj = "dds">这个是添加内容</p>
</body>
</html>

标签：属性,color,选择器,font,class,red,size
来源： https://www.cnblogs.com/TKOPython/p/12682511.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

属性选择器