码迷,mamicode.com
首页 > 其他好文 > 详细

属性选择器

时间:2020-04-11 22:06:29      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:color   back   content   lang   定义   包含   一个   属性   nbsp   

<!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   back   content   lang   定义   包含   一个   属性   nbsp   

原文地址:https://www.cnblogs.com/TKOPython/p/12682511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!