删除 ::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;
}

问题

我遇到的问题是当我的

容器。要让单选按钮或复选框旁边的标签可单击，它们必须包含在 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

您应该使用 子组合器 >：

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

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

Answer 2

只需继续使用子选择器即可。如果您查看此兼容性表，您将看到所有支持 的浏览器： 还支持子选择器>。

如果您需要最大程度的兼容性（与 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: " ";
}