• 关于css中class属性多值问题(亲测,各种情况,附详细代码)


     
    css中几种情况:
    一、.class之间没有空格
    /*这样写之间没有空格表示有个class属性是这样写的 class="first first1 first2"
    并且这样写,优先级高于下面直接写单个例如.first2{} ,虽然位置在.first2{}上面*/
     
    .first.first1.first2 {
    color: red;
    font-family: 'Times New Roman', Times, serif
    }
    .first2 {
    color: gray
    }
    二、.class之间有空格
    /*这样写之间带着空格表示class=first的对象的子对象中class=sec的子对象中class=third的样式*/
     
    .first .sec .third {
    color: yellowgreen;
    font-size: 40px;
    font-family: 'Times New Roman', Times, serif
    }
     
    二、.class之间有逗号
    /*这样写有逗号,表示多个class同时共用这些属性,只是合在一块写*/
    .first,
    .first1,
    .first2 {
    border: 1px solid black;
    color: blueviolet;
    font-family: 'Times New Roman', Times, serif
    }
     
     
    /*------下面是详细案例,直接copy测试即可--------------------------*/
     
     
     
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
    /*这样写之间没有空格表示有个class属性是这样写的 class="first first1 first2"
    并且这样写,优先级高于下面直接写单个例如.first2{} */
     
    .first.first1.first2 {
    color: red;
    font-family: 'Times New Roman', Times, serif
    }
    /*这样写有逗号,表示多个class同时共用这些属性,只是合在一块写
    同时这样写把上面的.first2属性覆盖了。*/
     
    .first,
    .first1,
    .first2 {
    border: 1px solid black;
    color: blueviolet;
    font-family: 'Times New Roman', Times, serif
    }
     
    .first2 {
    color: gray
    }
    /*这样写之间带着空格表示class=first的对象的子对象中class=child的样式
    或者 class="first"的对象的子对象中class=child的样式*/
     
    .first .child,
    .first .sec {
    color: red;
    font-family: 'Times New Roman', Times, serif
    }
    /*这样写之间带着空格表示class=first的对象的子对象中class=sec的子对象中class=third的样式*/
     
    .first .sec .third {
    color: yellowgreen;
    font-size: 40px;
    font-family: 'Times New Roman', Times, serif
    }
    </style>


    </head>

    <body>

    <div class="first">first,我是一大段
    <h1 class="sec">我是div的子对象h1<span class="third">我是div中子对象h1的子对象span,font-size:40样式</span></h1>
    正常文字正常文字正常文字正常文字
    <p class="child">我是div的子对象p</p> 正常文字正常文字正常文字

    </div>

    <div class="first1">first1,我是一大段
    <h1 class="sec">我是div的子对象h1<span class="third">我是div中子对象h1的子对象span,font-size:40样式</span></h1>
    正常文字正常文字正常文字正常文字
    <p class="child">我是div的子对象p</p> 正常文字正常文字正常文字</div>
    <div class="first2">
    <h1 class="sec">我是div的子对象h1<span class="third">我是div中子对象h1的子对象span,font-size:40样式</span></h1>
    正常文字正常文字正常文字正常文字
    <p class="child">我是div的子对象p</p> 正常文字正常文字正常文字</div>
    <div class="first first1 first2">
    <h1 class="sec">我是div的子对象h1<span class="third">我是div中子对象h1的子对象span,font-size:40样式</span></h1>
    正常文字正常文字正常文字正常文字
    <p class="child">我是div的子对象p</p> 正常文字正常文字正常文字</div>


    </body>

    </html>

  • 相关阅读:
    export和import实现模块化
    Net Core
    DockerCon 2016
    NET Core 构成体系
    Cloud Engine
    JVM内存结构
    Signalr
    Rabbit.Rpc
    遍历指定包名下所有的类(支持jar)(转)
    httpd的简单配置(转)
  • 原文地址:https://www.cnblogs.com/lixianfu5005/p/9022686.html
Copyright © 2020-2023  润新知