Question

我必须根据选择框的类来设置输入控件的样式。如果选择框具有“错误”类，那么我需要在输入控件上使用红色边框。我该如何使用SASS？没有通用的换行，只有一件事是输入控件（.select-input-wrap）的换行与选择框相邻。这是DOM结构。

<select class="form-select error"></select>
<div class="select-input-wrap">
  <input class="select-input" name="select-input" />
</div>

Answer 1

在纯CSS中（在SASS中也是如此），您可以使用+运算符来定位同级元素。例如：

.form-select.error + .select-input-wrap input {
    border: 3px solid red;
}

相关沙箱：http://www.cssdesk.com/r8Dh8

Answer 2

您需要设置同级元素的样式，请在SASS文件中尝试以下代码。

$red: #f00;

.error {

  &.form-select {

    + .select-input-wrap {

      > .select-input {
        border: 1px solid $red;
      }
    }
  }
}

Answer 3

如果您的select和div元素共享一个父元素，则可以基于该元素设置样式：

.parent .error + .select-input-wrap input {
  border: 1px solid red;
}

<div class="parent">
  <select id="some-sel" class="form-select error">  </select>
  <div class="select-input-wrap">
    <input class="select-input" name="select-input" />
  </div>
  
    <select id="another-sel" class="form-select">  </select>
  <div class="select-input-wrap">
    <input class="select-input" name="select-input" />
  </div>
</div>

对于SASS版本，只需删除多余的标点符号即可！

Answer 4

这是一个CSS解决方案。希望您可以转换为sass结构。

.error~.select-input-wrap input{
  border: solid 1px red;
}

<select class="form-select error"></select>
<div class="select-input-wrap">
  <input class="select-input" name="select-input" />
</div>

在没有JavaScript的情况下，如何根据另一个元素的变化来设置元素的样式？

4 个答案: