2

需要一些关于 CSS 选择器的帮助，因为我还不确定如何在 CSS 中表达这一点。:invalid当伪类出现在input元素上时（当然在不:invalid存在时隐藏），我如何让最后一个跨度“错误”显示出来？没有 Javascript，只有 CSS。

<div class="row-fluid">
    <div class="control-group control-field-nickname">
        <span class="span3 offset1">
            <label>{{ msgs.mid("nickname") }}</label>
        </span>
        <span class="span3 input-prepend">                              
            <i class="add-on icon-user"></i>
            <input class="form-field" type="email" id="field-nickname">
        </span>
        <span class="span1">Error!</span>
    </div>
</div>
4

2 回答 2

6

你不能。

CSS 没有表示“包含”的选择器/组合器，因此您不能说“与包含无效输入的跨度相邻的跨度”。

选择器级别 4的建议主题功能将允许您选择除选择器中出现的最后一个元素之外的元素，但（AFAIK）不允许您先上再下。

于 2013-04-04T13:04:07.780 回答
1

如果你可以修改你的 HTML

使用这个 HTML 结构（.span1实际上移动到相邻的位置）：

<div class="row-fluid">
    <div class="control-group control-field-nickname">
        <span class="span3 offset1">
            <label>{{ msgs.mid("nickname") }}</label>
        </span>
        <span class="span3 input-prepend">                              
            <i class="add-on icon-user"></i>
            <input class="form-field" type="email" id="field-ni
ckname">
            <span class="span1">Error!</span>
        </span>

    </div>
</div>

然后这个 CSS 应该可以工作（对于识别:invalid伪类的浏览器）：

.span1 {
    display: none;
}

input:invalid + .span1 {
    display: inline-block; /* or block */
}

如果你不能重构你的 HTML，那么就没有 CSS 解决方案。

于 2013-04-04T16:36:52.360 回答