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有一个ROOT文档变量，比如JavaScript的$(document)那么我就可以做到。

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>

我可以使用CSS的:root选择器吗？

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; }

Answer 2

W3标准在CSS中不包含反向引用。也没有办法访问另一个不是兄弟或孩子的CSS属性。以这种方式访问CSS属性的唯一方法是JavaScript。

非嵌套项的CSS样式

2 个答案: