問題タブ [css-counter]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 逆順リストのカスタム番号付け
逆順リストのカスタム カウンター スタイルを作成するにはどうすればよいですか。
カスタムの番号付けを昇順で行う方法を完全に説明しているこのリンクを見つけました。以下を変更して逆カスタム番号を取得し、特定のリストのみに適用するにはどうすればよいですか?
上記のコードの結果を次の図に示します。
css - 非表示のサブメニューの CSS カウンター
<ul>ネストされたを使用してドロップダウン メニューを作成しようとしています<li>。CSS カウンターで生成された数値が表示されます。
サブメニューはdisplay:noneホバーしないと非表示になります。
display私の問題は、要素が に設定されているときにカウンターがインクリメントされないことnoneです。
これを防ぐCSSプロパティを知っていますか?
に置き換えると機能display: noneしvisibility: hiddenますが、これをメニューに使用するのが良いかどうかわかりません。トラップはありますか?
css - ホバー CSS でコンテンツを変更する
ホバー時にリストの内容を変更したい、つまりローマ字を数値の 1、2、3 に変更したい
試してみli:hover li:hover:afterましたが、どちらも既存のコンテンツにコンテンツを追加します
html - CSS で特定のクラスをカウントできますか?
次のような単純なリストがあるとしましょう。
今、クラス「count」でリスト項目に番号を付けたいだけです
したがって、CSS を追加すると:
次に、クラスのないリスト項目の list-style-type を削除します。
私はこれを得る：
ここでの明らかな問題は、クラスのないリスト項目もここで「カウント」され、表示されないことです。
したがって、上記の例では、リストに 7 の番号を付ける必要があります。番号付けでは、クラスのないリスト項目はスキップされます。これはCSSで行うことができますか？
html - スキップするときのcssカウンターインクリメント不要なリセット：前
リストのように、h3、h4、h5 の前に数値を取得するために使用しているカウンターに問題があります。数値は、タグに class="count" が含まれている場合にのみ表示され、その場合にのみ、以下のヘッダーのカウンター リセットが必要です。
h3 の番号の表示をスキップすると、h4s カウンターが台無しになり、h4 をスキップする場合も同じです。誰かが理由を知っていますか？
CSS
html
結果
html - CSS カウンターリセットが疑似要素内で機能しない
次の CSS カウンターの例は、期待どおりに機能しません。小見出しのカウンターは、主見出しごとにリセットする必要があります。
ただし、以下は期待どおりに機能します。
counter-reset私の質問は、疑似要素内で機能しないのはなぜですか?