css3选择器波浪号

CSS3选择器中，波浪号（~）表示选择某个元素后面的同级元素中，所有与之匹配的元素。

/* 选择所有class为Box的元素后面的同级元素中，所有class为small的元素 */
.Box ~ .small { 
  color: red;
}

在上述代码中，我们使用了波浪号选择器，以.Box为起点选取所有同级元素中class为.small的元素，并将它们设为红色。

需要注意的是，波浪号选择器只能选择同级元素后面的元素，不包括它本身，也不包括之前的元素。

{{!-- 选择class为item的元素后面的同级元素中，所有class为other的元素 --}}
.item ~ .other { 
  font-size: 16px;
}

在上面的代码中，我们使用波浪号选择器选择了.item后面的所有同级元素中class为.other的元素，并将它们的字体大小设为16px。

在多个选择器同时使用时，波浪号选择器需要紧跟着之前的选择器，以实现准确的匹配。

{{!-- 选择所有同级class为Box的元素后面的class为small和big的元素 --}}
.Box ~ .small,.Box ~ .big {
  background-color: lightblue;
}

在上述代码中，我们同时使用了波浪号选择器、逗号分隔选择器和class选择器，选择了所有同级class为Box的元素后面的class为small和big的元素，并将它们的背景色设为淡蓝色。