CSS中“+”和“〜”选择器有什么区别？

Question

我使用过这些选择器。但是，无法区分它们。

看起来他们都是一样的。他们必须是一些我无法得到的差异。

Answer 1

+只会选择前一个选择器前面的第一个元素。

~选择前面的选择器前面的所有兄弟姐妹。

＆＃13;

＆＃13;

.plusSelector + div {
  background: red
}
.tiltSelector ~ div {
  background: red
}

＆＃13;

<h3>+ Selector</h3>
<div class="example1">
  <div class="plusSelector">test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

<h3>~ Selector</h3>
<div class="example1">
  <div class="tiltSelector">test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

+符号是中间兄弟，但~符号允许您以随机位置（始终在参考元素之后）定位兄弟姐妹

+的示例：

input + label {
  color:blue;
}

<input type="text">
<label>My label</label>

<input type="text">
<p>A paragraph</p>
<label>My label</label>

~的示例：

input ~ label {
  color:blue;
}

<input type="text">
<label>My label</label>

<input type="text">
<p>A paragraph</p>
<label>My label</label>