删除 ::before 或 ::after 伪元素 CSS 定义

Question

一些背景

我在我的应用程序中显示表单，并将每个字段（或一组相关的字段）包含在 UL/LI 元素中。这是一个例子：

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

如您所见，我在必填字段的 LI 元素上设置了一个类 required，因此当他们的 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 元素中。

问题

如何从div.field 中包含的所有label 元素中删除::after 伪元素？我是否必须实际定义它，但将其内容设置为空字符串，还是可以将其全部删除？

我可以将::after 的样式定义更改为

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

但出于兼容性原因，我想避免使用这些特殊的 CSS 选择器。

Answer 1

您应该使用child combinator > 将伪元素应用于labels，它们是.required 的子元素：

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

> 组合子比 ::after 伪元素（IE9 及以上）具有更好的 IE 兼容性（IE7 及以上）。如果您能够使用::after，那么没有理由不使用>。事实上，IE 对伪元素的支持是如此不一致，以至于 IE8 识别 CSS2 :after 而不是 CSS3 ::after。因此，除非您使用 :after，否则您的代码将无法在 IE8 上运行，并且要支持 IE7 和更早版本，您需要修复 JavaScript。

Answer 2

继续使用 child-of 选择器。如果您查看this compatibility table，您会发现所有支持:after 的浏览器也支持子选择器>。

如果您需要最大的兼容性（与 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

您还可以清除所有field 标签的::after 内容：

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


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