1

私はこれを正しくするために戦ってきました...基本的に私は次のHTMLセットアップを持っています:

<div class="box10">
   <span class="label01">Name:</span>
   <input class="tboxes" type="textbox" />
</div>

「span.label01」はインライン要素で、テキストボックス「input.tboxes」の左側に表示されます。テキストボックスがフォーカスを受け取ったときに、「span.label01」と「div.box10」にスタイルを追加しようとしています。

次のCSSコードを試しました：

input.tboxes:focus span.label01 {
   color:#FF9900;
   ...
}

しかし、何も起こりません。これが CSS セレクターの問題であることはわかっていますが、正しく理解できないようです。隣接する兄弟セレクターも試しましたが、何もしませんでした。誰でもここで私を助けることができますか? ティア！

4

3 に答える 3

5

これは、兄弟セレクターを使用することで完全に可能になります。

input.tboxes:focus + span.label01 {
   color:#FF9900;
   ...
}

このルールは、入力がフォーカスされるたびに label01 に適用されます。

ただし、これはスパンが入力の右側にある場合にのみ機能するため、要素の場所を切り替える必要があります。ただし、div の "position:relative" と span の "float: left" をすばやく実行すると、元の位置に戻ります。

于 2010-08-19T13:33:18.593 に答える
4

いいえ – CSS セレクターでこれを行うことはできません。ウィキペディアからの引用：

セレクターは昇格できません

CSS には、特定の基準を満たす要素の親または祖先を選択する方法がありません。より高度なセレクター スキーム (XPath など) を使用すると、より洗練されたスタイルシートが可能になります。ただし、CSS ワーキング グループが > 親セレクターの提案を拒否した主な理由は、ブラウザーのパフォーマンスとインクリメンタル レンダリングの問題に関連しています。

ただし、いくつかの単純な JavaScript を使用してこれを行うことができます。

// with jQuery:
$('input.tboxes').focus(function() {
    $(this).parent().find('span.label01').addClass('active');
});
于 2009-04-28T11:08:17.240 に答える
2

現在、セレクターは入力内のスパンを探しています。私が知る限り、あなたがやろうとしていることは、現在の CSS セレクター サポートの状態では確実に可能ではありません。

私は次のように少しjQueryでそれをやりたくなるでしょう:

$("input.tboxes").focus(function() {
    $(this)
    .parent("div:first")
        .addClass("focussed")
        .find("span")
            .addClass("focussed");
});

.label01.focussed と .box10.focussed のスタイルを設定すると、目的の処理が実行されるはずです。

于 2009-04-28T11:04:03.223 に答える