CSS中的"+"和“〜"选择器有什么区别? [英] What is difference between “+” and “~” selector in CSS?

问题描述

我已经使用了这些选择器.但是，无法获得它们的区别.

I have used these selector. However, not able to get the difference them.

似乎它们都一样工作.他们一定是我无法获得的一些区别.

It seems like they both work same. Their must be some difference which I am not able to get.

推荐答案

+ 将仅选择前一个选择器之后紧跟的第一个元素.

+ will only select the first element that is immediately preceded by the former selector.

〜选择器，所有选择器都位于前一个选择器之前.

~ selector all the sibling preceded by the former selector.

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

<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>

这篇关于CSS中的"+"和“〜"选择器有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！