css 计数器结果为 0
css counter result is 0
你好，我正在使用 css 计数器来显示某个部分内具有特定 class 的 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, 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>
</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 的直接子项 - none 其中有 .qodef-accordion-content 作为 class。
您需要使用通用选择器 (a space) 而不是这个特定的子选择器 (a >)。
第二个是那些确实具有所需 class 的元素被设置为 display: none; 它们不会被渲染，因此计数器永远不会增加。
参见 MDN
none
Turns off the display of an element so that it has no effect on layout
(the document is rendered as though the element did not exist)
更新：
此代码段计算 .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, 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>
</div>
</div>
</div>
</section>
and this is the html to display the number :
<div id="resultat"></div>
你好，我正在使用 css 计数器来显示某个部分内具有特定 class 的 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, 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>
</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 的直接子项 - none 其中有 .qodef-accordion-content 作为 class。
您需要使用通用选择器 (a space) 而不是这个特定的子选择器 (a >)。
第二个是那些确实具有所需 class 的元素被设置为 display: none; 它们不会被渲染，因此计数器永远不会增加。
参见 MDN
none Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist)
更新： 此代码段计算 .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, 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>
</div>
</div>
</div>
</section>
and this is the html to display the number :
<div id="resultat"></div>