1

私が持っているのは、他のいくつかのフィールドセットを含む1つのフィールドセットを持つフォームです。フィールドセットごとに、ユーザーは凡例の横にあるチェックボックスをオンにして、そのフィールドセットを展開できます（少なくとも理論的には）。効果に純粋なCSSを使用してみるのはクールだと思っていましたが、DOM内の2つの要素の位置に基づいてルールを作成する方法に夢中になっています。HTMLは次のとおりです。

 <fieldset id="areasofinterest">
     <legend>Areas of Interest Survey</legend>

 <p>Please Check The Areas Applicable to you and Answer the Coorepsonding Questions.</p>

<!--Area 1 Checkbox and Questions -->
<fieldset class="area">
    <legend>
        <input type="checkbox" value="area1" id="area1" />
        <label for="area1"> Area 1 :</label>
    </legend>
    <ul>
        <li>
            <label for="area1_q1">Q1</label>
            <input type="text" name="area1_q1" id="area1_q1" />
        </li>
        <li>
            <label for="area1_q2">Q2</label>
            <input type="text" name="area1_q2" id="area1_q2" />
        </li>
    </ul>
</fieldset>

<!--Area 2 Checkbox and Questions -->
<fieldset class="area">
    <legend>
        <input type="checkbox" value="area2" id="area2" />
        <label for="other"> Area 2 :</label>
    </legend>

    <ul>
        <li>
            <label for="area2_q1">Q1</label>
            <input type="text" name="area2_q1" id="area2_q1" />
        </li>
        <li>
            <label for="area2_q2">Q2</label>
            <input type="text" name="area2_q2" id="area2_q2" />
        </li>
    </ul>
</fieldset>

  </fieldset>

最初、このアイデアは少しハックっぽく見えましたが、w3cバリデーターを実行し、凡例に入力を埋め込んで渡されました。したがって、javascript / jqueryを使用した後は、自分が得ているものを取得できると確信していますが、古いブラウザーでサポートされていない場合でも、少なくともCSSでそれを行うための概念実証は必要ありません。

私はこのルールを試しました：

.area ul {
    color: red;
 }

 .area input:checked + ul {
    color: blue;
 }

しかし、運がありません。私が使用している両方のブラウザー（Chrome、FF 3.5）が、input:checked + ul単に入力の後にulが続く場合に実行できることを、はるかに簡単なテストで確認しました。また、両方のルールがある場合は色が切り替わります（簡略化されたバージョン）。

ただし、チェックされた要素が凡例タグ内にあり、ULの直接の兄弟ではない場合に、ULを参照する方法があるかどうかはわかりません。「チェックされた入力を含む凡例の兄弟...」と言う方法はありますか？

助けてくれてありがとう。

4

3 に答える 3

3

いいえ。

「チェックされる入力を含む凡例の兄弟...」

あなたの問題は「含む」ステップにあります。そのようにDOMを上に移動することはできません。子 (または子のコンテンツや属性) に基づいて CSS で要素を選択することはできません。

また、視覚的な相互作用 (および凡例) のためにフォーム要素を使用していますが、これは奇妙です。javascriptの方がいいと思います。他の CSS のみのソリューションを想像することはできますが、フォームの表示と非表示を信頼できるほどブラウザと互換性があると期待できるものはありません。

于 2009-08-12T21:23:24.267 に答える
0

私の最初の考えは、これはCSSだけでは機能しないということです。javascriptなしでこれを行うことはできないと思います。たとえば、jQueryでセレクターを使用して、Javascriptを介して親ノードを取得できます。

また、チェックボックスを「チェック」した後、CSSパターンがinput [checked='checked']と一致するかどうか疑問に思いました...次のようになります。

.area input +ul{//展開されていません}

.area input [checked ='checked'] +ul{//拡張}

ただし、機能しなかったため、チェック済み/オフの変更を実装するためだけにjavascriptを使用する必要があります。以前にも提案したように、チェックボックス以外のものを使用します。

于 2009-08-12T21:37:52.083 に答える
0

隣接するセレクター（+）は、明らかに隣接する要素を選択します。親セレクターが必要ですが、残念ながら存在しません（過去にw3cに対していくつかの提案がなされたにもかかわらず）。

Javascript（parentNode）が唯一の選択肢です。

于 2009-08-12T21:41:49.627 に答える