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元素中。

问题

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

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

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

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

Answer 1

您应该使用child combinator >将伪元素应用于label的{{1}}的孩子：

.required

ul.form li.required > label::after { content: " *"; font-weight: bold; color: #f66; }组合器具有比>伪元素（IE9及更高版本）更好的IE兼容性（IE7及更高版本）。如果您能够使用::after，则没有理由不使用::after。事实上，IE对伪元素的支持是如此不一致，IE8识别CSS2 >而不是CSS3 :after。因此，除非您使用::after，否则您的代码将无法在IE8上运行，并且为了支持IE7及更早版本，您需要修复JavaScript。

Answer 2

继续选择孩子。如果您查看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

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

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


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

删除::之前或::之后的伪元素CSS定义

一些背景

问题

问题

3 个答案: