css - 仅当前一个元素包含类时才应用条件

抱歉，如果这太具体了，但是我真的不想为此使用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出现在文本输入下方输入重点时）。

我想要的伪代码：

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

CSS可以做到这一点，还是我必须使用Javascript？

谢谢。

最佳答案

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

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

<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 - 仅当前一个元素包含类时才应用条件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31711388/