移除：：在伪元素CSS定义之前或之后 一些背景

我在应用程序中显示表单，并将每个字段（或相关字段集）包含在

UL/LI

元素中。这是一个例子：

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

问题 我遇到的问题是，我的

容器中有一个复选框或单选按钮列表。要使单选按钮或复选框旁边的标签可单击，它们必须包含在

标签中

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

但出于兼容性原因，我希望避免使用这些特殊的CSS选择器。
您只需将伪元素应用于
标签
的子项。
必需
使用：

组合器比
：after
伪元素（IE9及以上）具有更好的IE兼容性（IE7及以上）。如果您能够使用
：：在
之后，没有理由不使用
。事实上，IE对伪元素的支持是如此的不一致，以至于IE8可以识别CSS2
：after
，但不能识别CSS3
：：after
。因此，除非您使用
：after
，否则您的代码将无法在IE8上运行，并且为了支持IE7及更旧版本，您需要一个JavaScript修复程序。
您还可以清除所有
字段的
：after
内容：

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


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

只需继续执行选择器的子项。如果查看，您将看到所有支持
：after
的浏览器也支持选择器的子项

如果您需要最大兼容性（IE7），请考虑使用后置映像而不是<代码>：在TAG之后。例如：
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;
}

就在你提交答案之前，我编辑了我的问题。出于兼容性的原因，我想避免使用特殊的选择器…@Robert Koritnik:请参阅我的编辑
与IE的兼容性比
：：after
更好。你说得对。如果我使用的是伪元素，那么使用高级选择器也不会有问题。：）我用的是单双collon符号。我只是用更严格的方式（按规范）写的。请注意，屏幕阅读器不会可靠地宣布生成的内容，因此使用它们的用户不会知道星号。我认为您实际上没有清除星号，而是用不同的内容重新定义了它们。
ul.form li.required > label::after
{
    content: " *";
    font-weight: bold;
    color: #f66;
}

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


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

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