HTML内标签class继承

Question

<div class="inputBlock">
      <div class="formBox">
        <div class="inner{{ $errors->hasAny('shop_open', 'shop_close') ? ' error' : '' }}">
          <div class="answerBox section">
            <div class="x-section">
              <div data-role="fieldcontain" class="section">
                <select 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>
      <!-- formBox -->
    </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>

         style中 第一行为横向展开

         第二行为每个option中间的间距
         第三个分割线

        第四个为select下的option框的长度恒定不变并优先？这里开始有点小疑问
        第五个是与第四个相辅存在？

而ui-field-contain和ui-btn-inline,ui-select在上图的标签里被继承， 所以应该用新的类替换掉或添加达到效果并避免其他的地方出现改变
而这个地方是上图的class ui-field-contai所在的标签里

变为 <div data-role="fieldcontain" class="section; x-ui-field-contain">
这个理解是不是有出入或者错误，谢谢~

Answer 1

前3个理解对，第四个是覆盖原来框架设置的.ui-select的width:74%设置，变为自动宽度（auto），自动占满父容器的宽度

第5个样式有问题 ^_^，写错了，那个样式不生效，因为ui-btn-inline不是x-ui-field-contain的直接子节点，所以不会起作用。，ui-btn-inline为ui-select的直接节点，应该是下面这样写

.ui-select >.ui-btn-inline{max-width: 100%!important;}

.x1>.x2这种选择器用于选x1样式下的有x2样式的直接子节点，如果>改为空格，则是选x1样式下所有包含x2样式的节点