zoukankan      html  css  js  c++  java
  • 关于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>

  • 相关阅读:
    团队第二次作业
    重载和多态
    团队第一次作业
    结对编程
    java处理数字字符串每5个数字为一组进行拆分,保留逗号。不足5个的也存为一组。
    POI & easyExcel快速使用
    Access denied for user 'root'@'localhost' (using password: YES) 解决方法
    快速理解 并发,并行,同步,异步
    Spring Tools Suite 安装于基本使用
    Mysql 数据备份与恢复
  • 原文地址:https://www.cnblogs.com/lixianfu5005/p/9022686.html
Copyright © 2011-2022 走看看