关于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>
