p ~ strong { color: red; } div ~ ul { margin: 0; }
在上面的代码中,第一个选择器选择了所有紧随 p 元素后的 strong 元素,并将它们颜色设为红色。第二个选择器选择了所有紧随 div 元素后的 ul 元素,并将它们的 margin 设为 0。
请注意,波浪符选择器只能选择元素在之前声明的元素之后的同级元素。这意味着在下面的结构中,第二个 div 元素并不会被选择:
<div> <p>这是第一个 div 元素内的段落</p> <p>这也是第一个 div 元素内的段落</p> </div> <div> <p>这是第二个 div 元素内的段落</p> <p>这也是第二个 div 元素内的段落</p> </div>
/* 这个选择器只会选择第一个 div 后的 p 元素 */ div ~ p { color: blue; }
波浪符选择器非常有用,尤其是在需要对同级元素进行样式设置时。然而,需要谨慎使用,以免不小心选择了不想要的元素。