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