一些背景
我在我的应用程序中显示表单,并将每个字段(或一组相关的字段)包含在一个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
元素内。
问题
如何从a 中包含的::after
所有元素中删除伪元素?我是否必须实际定义它但将其内容设置为空字符串,或者是否可以将其全部删除?label
div.field
我可以将我的样式定义更改::after
为
ul.form li.required > label::after
{
content: " *";
font-weight: bold;
color: #f66;
}
但出于兼容性原因,我想避免使用这些特殊的 CSS 选择器。