class的同级与包含

.同级不加空格 包含或者下面的加空格

.headerBg.active中间无空格可以看成一个整体，这个div已加两个class <div class="headerBg active"></div>

.div span.a:hover =.div span:hover =.div .a:hover         <span class="a">1</span> == span.a同级

.headerBg.active .navLi.active h3 a span{

    display:block;

     height:48px;

    line-height:50px;

    padding:0 30px;

     transition:all 0.4s ease 0s;

     font-size: 16px;

}

<div class="headerBg active"></div>

.headerBg.active .navLi.active:表示div class="headerBg active"下的li的class等于navLi active这没加空格

<div class="headerBg active">

<ul>

<li class="navLi active"><h3><a href="/"><span>首页</span></a></h3> </li>

</ul>

</div>

.headerBg.active .navLi.active h3 a span：表示div class="headerBg active"下的li的class等于navLi active

下的h3下的a下的span

.headerBg.active ：表示同级的class (原因取决于syle样式表的加载顺序，后面的会替换前面的)

// class 书写的顺序和样式覆盖没关系

//如果要覆盖前面class的样式,就要把所展示的样式写在被覆盖class样式的后面(相同样式的覆盖、不同的会显示)

//.headerBg.active 所以如果想要active样式覆盖headerBg样式的话

在style或者样式表里面 active的样式就要写在headerBg样式的后面，

所以active的样式才会会覆盖headerBg的样式(相同样式的覆盖、不同的显示)