关于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
cssclass属性}
/*这样写之间带着空格表⽰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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。