关于css中class属性多值问题

柔光的暖阳◎ 2021-07-05 01:25 470阅读 0赞

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>