2

一些背景

我在我的应用程序中显示表单,并将每个字段(或一组相关的字段)包含在一个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所有元素中删除伪元素?我是否必须实际定义它但将其内容设置为空字符串,或者是否可以将其全部删除?labeldiv.field

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

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

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

4

3 回答 3

2

您应该只将伪元素应用于使用子组合label器的子s :.required>

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

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

于 2011-02-06T15:44:25.850 回答
1

继续使用子选择器。如果您查看此兼容性表,您会发现所有支持的浏览器: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;
}
于 2011-02-06T15:50:24.393 回答
0

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

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


ul.form li.required div.field label::after
{
    content: " ";
}
于 2011-02-06T15:49:22.803 回答