1

複数ページのフォームがあり、各ページはリスト項目に含まれています。これらの各リスト項目には、リスト項目に質問を含む順序付けられたリストが含まれています。これらのリスト項目のそれぞれには、ラジオまたはチェックボックスの入力タイプのいずれかを選択した順序付けられていないリストが含まれています。

順序付きリストのリスト項目で CSS カウンターをインクリメントしようとしています。

基本的な例を次に示します: http://jsfiddle.net/wCbvb/

<ol>
    <li>
        <h1>Page 1</h1>
        <ol>
            <li>
                <h2>Question 1</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 2</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>
        <h1>Page 2</h1>
        <ol>
            <li>
                <h2>Question 3</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 4</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>
        <h1>Page 3</h1>
        <ol>
            <li>
                <h2>Question 5</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 6</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
</ol>

質問 (h2 を含むリスト項目) を取得してカウンターをインクリメントし、次のリストに進みます。これが可能かどうかはわかりませんが、ご覧いただきありがとうございます。これには、CSS カウンターを使用した純粋な CSS ソリューションのみを使用します。どうもありがとう:)

4

1 に答える 1

1

どうぞ: http://jsfiddle.net/S5CnU/

CSScounter-incrementとcounter-reset、content、:beforeおよび を参照してください:after。

上記の例では、タイプの質問番号を保持する必要がなくなりました。これは、CSS によって既に処理されています。

.questions {
    counter-reset: question;   
}

.questions > li > ol > li {
    list-style-type:none;
}

.questions > li > ol > li > h2:after { 
    content: counter(question);
}

.questions > li > ol > li > h2:before {
    counter-increment: question;
    content: counter(question) ":= ";
}

注: 私はあなたの最初olのquestionsクラスを与えました。

于 2013-09-21T07:15:28.277 に答える