“相邻”元素的CSS选择器

Question

需要一些关于CSS选择器的帮助，因为我不确定如何在CSS中表达它。 当input元素上出现:invalid伪类时，如何显示最后一个跨度“错误”（当然，当不存在: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的主题功能将允许您选择除选择器中出现的最后一个元素以外的其他元素，但是（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解决方案。