css语法继承style问题

Question

<div class="inputBlock">
      <div class="formBox">
        <div class="inner{{ $errors->hasAny('shop_open', 'shop_close') ? ' error' : '' }}">
          <div class="answerBox section 00f">
            <div class="x-section">
              <div data-role="fieldcontain" class="section">
                <select class="5hg" name="date1" id="date1" data-inline="true" required onchange="toFunction(event,1)">
                  // 第一排option块儿1      
                </select>
              </div>
              <div data-role="fieldcontain" class="section">
                <select name="business_open_time" id="business_open_time" data-inline="true" required onchange="toFunction(event,2)">
                    //第一排option块儿2
              </div>
              <div data-role="fieldcontain" class="section">
                <select name="business_finish_time" id="business_finish_time" data-inline="true" required onchange="toFunction(event,3)">
                   //第一排option块儿3
                </select>
              </div>
            </div>
            <hr style="border-top: 1px solid rgb(204, 204, 204);">
            <div class="x-section">
              <div data-role="fieldcontain" class="section">
                <select name="date2" id="date2" data-inline="true" required onchange="toFunction(event,4)">
                  //第二排option块儿1
                </select>
              </div>
              <div data-role="fieldcontain" class="section">
                <select name="business_open_time" id="business_open_time" data-inline="true" required onchange="toFunction(event,5)">
                   //第二排option块儿2
                </select>
              </div>
              <div data-role="fieldcontain" class="section">
                <select style="width:200px" name="business_finish_time" id="business_finish_time" data-inline="true" required onchange="toFunction(event,6)">
                  //第二排option块儿3
                </select>
              </div>
              <hr style="border-top: 1px solid rgb(204, 204, 204);">
             <div class="x-section">
              <div data-role="fieldcontain" class="section">
                <select name="shop_close1" id="shop_close1" data-inline="true" required onchange="close1Change()">
                  //第三排option块儿1
                </select>
              </div>
              <div data-role="fieldcontain" class="section" id="spMul" style="display:none; ">
                <select name="shop_close2" id="shop_close2" data-inline="true" onchange="goFunction(event,2)">
                  //第三排option块儿2js触发部分
                </select>
              </div>
            </div>
             </div>
            @include('merchant/form/rpay_openday_notes')
          </div>
        </div>
      </div>
      
    </div>
 
<style>
  .answerBox>.x-section{display:flex;flex-wrap:wrap;justify-content:space-between}
 
  .answerBox > .x-section>.section{x-width:33%}
  .answerBox > .x-section > hr{width:100%}
 
  .x-ui-field-contain .ui-select{width:auto!important;}
  .x-ui-field-contain >.ui-btn-inline{max-width: 100%!important;}
</style>

.answerBox>.x-section 是说在class=answerbox的标签下的哪一行class=x-section标签适用后面的style
如果是.answerBox .x-section 的话，表示class=answerbox的标签下的所哟class=x-section的标签全部继承大括号内的style，也就是说这种样式会影响其他地方的块儿元素的结构的意思否

感谢解答

Answer 1

.answerBox>.x-section只对下面直接子节点有效

.answerBox .x-section则是answerBox 样式容器下的所有包含x-section的节点有效