Question

需要一些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>

Answer 1

你不能。

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

选择器级别4的建议subject功能将允许您选择除选择器中显示的最后一个元素之外的元素，但是（AFAIK）不允许您上升然后停止。

Answer 2

如果您可以修改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解决方案。

“相邻”元素的CSS选择器

2 个答案:

如果您可以修改HTML