“相鄰”元素的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解決方案。