css 计数器结果为 0

问题描述

你好，我正在使用 css 计数器来显示一个部分内具有特定类的 div 的数量 但我不知道为什么我的代码的结果总是 0 这是代码

<section id="commandes" class="vc_section">
  <div class="vc_row wpb_row vc_row-fluid">
    <div class="wpb_column vc_column_container vc_col-sm-12">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          
          <div class="wpb_text_column wpb_content_element  titre_f">
            <div class="wpb_wrapper">
              <p>Commandes</p>
            </div>
          </div>

          <div class="qodef-accordion-holder qodef-ac-default qodef-toggle qodef-ac-Boxed clearfix accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset">
            <h5 class="qodef-accordion-title ui-accordion-header ui-state-default ui-corner-top ui-corner-bottom">
              <span class="qodef-accordion-mark">
                <span class="qodef_icon_plus icon_plus"></span>
                <span class="qodef_icon_minus icon_minus-06"></span>
              </span>
              <span class="qodef-tab-title">Y a t’il des minimas de commande?</span>
            </h5>
            
            <div class="qodef-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
              <div class="qodef-accordion-content-inner">
                <div class="wpb_text_column wpb_content_element  texte-ac">
                  <div class="wpb_wrapper">
                    <p>Post haec gallus Hierapolim profecturus ut expeditioni specie tenus adesset,Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum,quae per multas difficilisque causas adfore iam sperabatur,non ut mos est principibus,quorum diffusa potestas localibus subinde medetur aerumnis,disponi quicquam statuit vel ex provinciis alimenta transferri conterminis,sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="qodef-accordion-holder qodef-ac-default qodef-toggle qodef-ac-Boxed clearfix accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset">
            <h5 class="qodef-accordion-title ui-accordion-header ui-state-default ui-corner-top ui-corner-bottom">
              <span class="qodef-accordion-mark">
                <span class="qodef_icon_plus icon_plus"></span>
                <span class="qodef_icon_minus icon_minus-06"></span>
              </span>
              <span class="qodef-tab-title">Est-il possible de commander des quantités inférieures aux quantités minimum indiquées sur le site?</span>
            </h5>
            <div class="qodef-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
              <div class="qodef-accordion-content-inner">

                <div class="wpb_text_column wpb_content_element  texte-ac">
                  <div class="wpb_wrapper">
                    <p>Post haec gallus Hierapolim profecturus ut expeditioni specie tenus adesset,sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

这是显示数字的html：

<div id="resultat"></div>

这是CSS：

#commandes{counter-reset:commandes;}

#commandes > .qodef-accordion-content {counter-increment:commandes;}

#resultat::after {content:counter(commandes);}

结果是：0

解决方法

有两个问题导致计数器不递增。

首先是CSS：

#commandes > .qodef-accordion-content {counter-increment:commandes;}

仅选择 #commandes 的直接子级 - 其中没有一个将 .qodef-accordion-content 作为一个类。

您需要使用通用选择器（一个空格）而不是这个特定的子选择器（a >）。

第二个是那些确实具有所需类的元素被设置为 display: none; 它们不会被呈现，因此计数器永远不会增加。 见MDN

无 关闭元素的显示，使其对布局没有影响 （文档呈现为好像该元素不存在）

更新： 此代码段计算 .qodef-accordion-holder 的数量：

#commandes{counter-reset:commandes;}

#commandes .qodef-accordion-holder {counter-increment:commandes;}

#resultat::after {content:counter(commandes);}

<section id="commandes" class="vc_section">
  <div class="vc_row wpb_row vc_row-fluid">
    <div class="wpb_column vc_column_container vc_col-sm-12">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          
          <div class="wpb_text_column wpb_content_element  titre_f">
            <div class="wpb_wrapper">
              <p>Commandes</p>
            </div>
          </div>

          <div class="qodef-accordion-holder qodef-ac-default qodef-toggle qodef-ac-boxed clearfix accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset">
            <h5 class="qodef-accordion-title ui-accordion-header ui-state-default ui-corner-top ui-corner-bottom">
              <span class="qodef-accordion-mark">
                <span class="qodef_icon_plus icon_plus"></span>
                <span class="qodef_icon_minus icon_minus-06"></span>
              </span>
              <span class="qodef-tab-title">Y a t’il des minimas de commande?</span>
            </h5>
            
            <div class="qodef-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
              <div class="qodef-accordion-content-inner">
                <div class="wpb_text_column wpb_content_element  texte-ac">
                  <div class="wpb_wrapper">
                    <p>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset,Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum,quae per multas difficilisque causas adfore iam sperabatur,non ut mos est principibus,quorum diffusa potestas localibus subinde medetur aerumnis,disponi quicquam statuit vel ex provinciis alimenta transferri conterminis,sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="qodef-accordion-holder qodef-ac-default qodef-toggle qodef-ac-boxed clearfix accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset">
            <h5 class="qodef-accordion-title ui-accordion-header ui-state-default ui-corner-top ui-corner-bottom">
              <span class="qodef-accordion-mark">
                <span class="qodef_icon_plus icon_plus"></span>
                <span class="qodef_icon_minus icon_minus-06"></span>
              </span>
              <span class="qodef-tab-title">Est-il possible de commander des quantités inférieures aux quantités minimum indiquées sur le site?</span>
            </h5>
            <div class="qodef-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
              <div class="qodef-accordion-content-inner">

                <div class="wpb_text_column wpb_content_element  texte-ac">
                  <div class="wpb_wrapper">
                    <p>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset,sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
and this is the html to display the number :


<div id="resultat"></div>