使用通用兄弟选择器 ~ 可以选中指定元素之后的所有同级元素，从而实现批量修改。具体做法是在 css 中编写 target ~ selector { property: value; } 规则，浏览器会自动匹配并应用样式，无需 javascript 干预。
如何选中目标元素后的所有同级元素
要选中目标元素之后的所有同级元素，只需在 CSS 规则中使用 ~ 符号连接目标选择器和目标元素选择器。例如，div ~ p 会选中所有跟在 <div> 后面的 <code><p></p> 元素，无论它们之间隔了多少其他标签。
/* HTML结构 */
<div class="container">
<span>Start</span>
<div class="trigger">Trigger</div>
<p>Para 1</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<span>Span 1</span>
<p>Para 2</p>
</div>
/* CSS规则 */
.trigger ~ p {
color: red;
font-weight: bold;
}
运行上述代码后，<p>Para 1</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 和 <p>Para 2</p> 都会变为红色加粗，而 <span>Span 1</span> 不受影响，因为它不是 p 元素。第一个 <span></span> 也不受影响，因为它在 .trigger 之前。
如何处理非直接相邻的兄弟元素
通用兄弟选择器不要求元素紧邻，只要它们在 DOM 树中处于同一层级且目标元素在前即可。这意味着中间可以夹杂任意数量的其他元素，选择器依然能穿透这些干扰项找到后续的目标元素。
/* 复杂HTML结构 */
<section>
<h2 id="header">Title</h2>
<div>
<p>Intro text</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/gongju/2905" title="CSS">CSS</a>
<p>CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<p>Conclusion</p>
</section>
/* CSS规则 */
#header ~ p {
background-color: #f0f0f0;
}
在此例中，#header ~ p 会选中 <p>Intro text</p> 和 <p>Conclusion</p>。尽管 <p>Intro text</p> 被嵌套在 <div> 中，但它仍然是 <code>#header 的同级元素（因为它们都是 <section></section> 的直接子元素），所以会被选中。这种穿透能力使得在处理复杂布局时非常有用。
当目标元素不存在时会发生什么
如果指定的目标元素在 DOM 中根本不存在，或者没有位于任何目标元素之后的同级元素，那么选择器将不会匹配任何内容，样式也不会应用。这是 CSS 选择器的基本行为：如果没有匹配的节点，就不会产生视觉效果。
<div class="container">
<p>Para 1</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>Para 2</p>
</div>
/* CSS规则 */
.nonexistent-class ~ p {
color: blue;
}
由于 .nonexistent-class 在 HTML 中不存在，因此没有任何 <p></p> 元素会被选中，<p>Para 1</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 和 <p>Para 2</p> 保持默认样式。这确保了在没有触发条件的情况下，页面布局不会意外改变。
