Question

很抱歉，如果这有点太具体，但我真的不想使用jQuery。给出以下HTML模板：

<form>
  <div class="row">
    <input type="text">
    <div class="hint">Hint displays on focus using Bootstrap Material Design</div>
    <!-- Nothing special applies to this because this is the first row -->
  </div>

  <div class="row">
    <input type="text">
    <!-- This will have a margin-top of 20px -->
    <!-- This doesn't have a hint so the following .row doesn't need the extra 10px -->
  </div>

  <div class="row">
    <input type="text">
    <!-- Regular margin-top of 10px -->
  </div>

</form>

以下CSS：

.hint {
  display: none;
}
.row {
  margin-top: 10px;
}

对于包含.row的每个.hint，我想为下一个.row应用额外的10px边距，这样.hint可以正常显示而不会溢出当输入被聚焦时，行（.hint出现在文本输入下方。

我想要的Psuedocode：

.row[previous .row contains .hint] {
    margin-top: 20px;
}

这可能是CSS还是我必须使用Javascript？

感谢。

Answer 1

padding-bottom: 10px元素使用hint可以包含相同的间距。

＆＃13;

.hint {
  display: none;
}
.row input:focus + .hint {
  display: block;
  padding-bottom: 10px;
}
.row {
  margin-top: 10px;
}

＆＃13;

<form>
  <div class="row">
    <input type="text">
    <div class="hint">Hint displays on focus using Bootstrap Material Design</div>
    <!-- Nothing special applies to this because this is the first row -->
  </div>

  <div class="row">
    <input type="text">
    <!-- This will have a margin-top of 20px -->
    <!-- This doesn't have a hint so the following .row doesn't need the extra 10px -->
  </div>

  <div class="row">
    <input type="text">
    <!-- Regular margin-top of 10px -->
  </div>

</form>

＆＃13;

仅当前一个元素包含类

1 个答案: