css - 如果复选框被选中，如何操作输入字段

Question

我对工具提示的 CSS 有疑问。工具提示属于输入字段，如果选中其他复选框，则需要将此工具提示正确放置在输入字段上。所以复选框是:

 <input type="checkbox" id="telefonBox" />

以及需要放置tooltip的输入框:

<input type="text" class="form-control tooltip-berater" id="agentName"/>

我试过的是

input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}

(基本上我正在尝试编写:如果选中了带有此 id 的复选框，则在此 css 类中执行一些操作)但根本不起作用。我错过了什么？

Answer 1

如果两个输入都是同一个 div 的子元素，但不是直接相邻(在 HTML 标记中)，那么您需要使用 ~ 运算符而不是 + .

+ 的工作方式如下:

<div class="parent">
  <div class="first"></div>
  <div class="second></div>
</div

.first + .second {
  // do stuff with second
}

~ 的工作方式如下:

<div class="parent">
  <div class="first"></div>
  <div class="inbetween"></div>
  <div class="second"></div>
</div

.first ~ .second {
  // you can still do stuff with second
}

在 HTML 标记的其他可能情况下，没有选择器可以帮助您，尤其是:

1. 当.second div 比.first 更早时
2. 当 .second div 与 .first 的父级不同时

在这些情况下，您需要使用 JavaScript 来选择和更改元素的 CSS。