Определение CSS псевдоэлемента Remove :: before или :: after

Question

Некоторый фон

Я отображаю формы в своем приложении и заключаю каждое поле (или связанный с ними набор) в элемент 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 element.

Вопрос

Как удалить ::after псевдоэлемент из всех label элементов, которые содержатся в div.field?Должен ли я на самом деле определить его, но установить для его содержимого пустую строку или можно удалить все это вместе?

Я мог бы изменить определение стиля для ::after на

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

но я хочу избежать этих специальных селекторов CSS по причинам совместимости.

Answer 1

Вы должны просто применить псевдоэлемент к label s, которые являются потомками .required, используя дочерний комбинатор >:

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

комбинатор имеет лучшую совместимость с IE (IE7 и выше), чем псевдоэлемент ::after (IE9 и выше).Если вы можете использовать ::after, нет никаких причин не использовать >.Фактически, поддержка IE для псевдоэлементов настолько противоречива, что IE8 распознает CSS2 :after, но не CSS3 ::after.Таким образом, ваш код не будет работать в IE8, если вы не используете :after, а для поддержки IE7 и старше вам нужно исправить JavaScript.

Answer 2

Просто продолжайте с ребенком-селектором. Если вы посмотрите на эту таблицу совместимости , то увидите, что все браузеры, поддерживающие :after, также поддерживают селектор child-of >.

Если вам нужна максимальная совместимость (с IE7), рассмотрите возможность использования фонового изображения вместо тега :after. Пример:

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;
}

Answer 3

Вы также можете очистить содержимое ::after для всех field меток:

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


ul.form li.required div.field label::after
{
    content: " ";
}