html - NOT 嵌套项的 CSS 样式

Question

我正在使用 CSS/SASS 来设置有效性消息的样式。该消息未嵌套在我正在访问的内容中。

例如，如果输入框无效，我的 JavaScript 会向输入框添加一个错误类。我希望阻止可见属性在页面下方进一步更改。

// when no error
input#user_tags_attributes_0_tagname
// then
div.tagname-available { display: block; } // NOT NESTED
// and
div.tagname-unavailable { display: none; } // NOT NESTED

// when error
input#user_tags_attributes_0_tagname.error
// then
div.tagname-available { display: none; } // NOT NESTED
// and
div.tagname-unavailable { display: block; } // NOT NESTED

理论上，我应该能够访问这些元素，而无需编写 JavaScript 来执行此操作。可能如果 CSS 有一个像 JavaScript 的 $(document) 这样的 ROOT 文档变量，那么我就可以做到。

input#user_tags_attributes_0_tagname {
  $(document) > div.tagname-available { display: block; } // NOT NESTED
  $(document) > div.tagname-unavailable { display: none; } // NOT NESTED
}

对于 HTML

<table>
  <tr>
    <td width="200px">
      <span class="pull-right vf-labels">Choose your Tag ID</span>
    </td>
    <td>
      <input class="error" data-validate="/users/checktagname" id="user_tags_attributes_0_tagname" name="user[tags_attributes][0][tagname]" type="text">
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <span class="text-primary" style="font-size: small;">Check Availability</span><br />
      <div class="tagname-available">
        <span class="glyphicon glyphicon-ok text-success" style="margin-left:-20px;margin-right:4px;"></span>
        <span class="text-success" style="font-size: small;">Available</span>
      </div>
      <div class="tagname-unavailable">
        <span class="glyphicon glyphicon-remove text-danger" style="margin-left:-20px;margin-right:4px;"></span>
        <span class="text-danger" style="font-size: small;">Not Available</span>
      </div>
    </td>
  </tr>
</table>

也许我可以使用 :root CSS 选择器？

Answer 1

您应该可以使用同级选择器来做到这一点。

// when no error  
input#user_tags_attributes_0_tagname +
.tagname-available { display: block; }
input#user_tags_attributes_0_tagname +
.tagname-unavailable { display: none; }

// when error  
input#user_tags_attributes_0_tagname.error +
.tagname-available { display: none; }
input#user_tags_attributes_0_tagname.error +
.tagname-unavailable { display: block; }