2

いくつかの背景

アプリケーションでフォームを表示しており、各フィールド (または関連するフィールドのセット) をUL/LI要素で囲んでいます。これは例です:

<ul class="form">
    <li class="required">
        <label for="...">Field label</label>
        <div class="field">
            <input type="text" ... />
        </div>
    </li>
    ...
</ul>

ご覧のとおりrequired、必須フィールドのLI要素にクラスを設定しているので、それらlabelが表示されたら、疑似要素を定義して、::afterその後に赤いアスタリスクを追加します。

ul.form li.required label::after
{
    content: " *";
    font-weight: bold;
    color: #f66;
}

問題

私が抱えている問題は、<div class="field">コンテナにチェックボックスまたはラジオボタンのリストがある場合です。ラジオ ボタンまたはチェックボックスの横にあるラベルをクリック可能にするには、label.

<ul class="form">
    <li class="required">
        <label for="...">Radio button set</label>
        <div class="field">
            <input type="radio" name="RBSet" value="1" id="RBSet1" /><label for="RBSet1">First</label><br/>
            <input type="radio" name="RBSet" value="2" id="RBSet2" /><label for="RBSet2">Second</label><br/>
            <input type="radio" name="RBSet" value="3" id="RBSet3" /><label for="RBSet3">Third</label><br/>
            ...
        </div>
    </li>
    ...
</ul>

もちろん問題は、ラジオ ボタンの横にある各ラベルにアスタリスクが表示されることです。アスタリスクもli.required要素内に含まれているためです。

質問

に含まれる::afterすべての要素から疑似要素を削除するにはどうすればよいですか? 実際に定義する必要がありますが、その内容を空の文字列に設定する必要がありますか、それともすべて一緒に削除することは可能ですか?labeldiv.field

のスタイル定義を::afterに変更できます

ul.form li.required > label::after
{
    content: " *";
    font-weight: bold;
    color: #f66;
}

しかし、互換性の理由から、これらの特別な CSS セレクターは避けたいと考えています。

4

3 に答える 3

2

子コンビネータを使用する子labelである sに疑似要素を適用するだけです。.required>

ul.form li.required > label::after
{
    content: " *";
    font-weight: bold;
    color: #f66;
}

コンビネータは、疑似要素 (IE9 以降>) よりも IE 互換性 (IE7 以降) が優れています。::afterが使える::afterなら、使わない理由はありません>。実際、疑似要素に対する IE のサポートは非​​常に一貫性:afterがないため、IE8 は CSS2 を認識しますが、CSS3 は認識しません::after。したがって、コードは を使用しない限り IE8 では機能しません:after。IE7 以前をサポートするには、JavaScript の修正が必要です。

于 2011-02-06T15:44:25.850 に答える
1

child-of セレクターを先に進めてください。この互換性表を見ると、サポートするすべてのブラウザが:afterchild-of selector もサポートしていることがわかります>。

:after最大限の互換性 (IE7 との) が必要な場合は、タグではなく背景画像の使用を検討してください。例：

ul.form li.required label
{
  background: url(/images/star.png) top right no-repeat;
  padding-right: 10px;
}


ul.form li.required div.field label
{
  background: none;
  padding-right: 0px;
}
于 2011-02-06T15:50:24.393 に答える
0

すべてのラベルの::afterコンテンツをクリアすることもできます:field

ul.form li.required label::after
{
    content: " *";
    font-weight: bold;
    color: #f66;
}


ul.form li.required div.field label::after
{
    content: " ";
}
于 2011-02-06T15:49:22.803 に答える