如何在CSS3中正确使用通用兄弟选择器~批量修改后续元素-css教程-PHP中文网

使用通用兄弟选择器 ~ 可以选中指定元素之后的所有同级元素，从而实现批量修改。具体做法是在 css 中编写 target ~ selector { property: value; } 规则，浏览器会自动匹配并应用样式，无需 javascript 干预。

如何在CSS3中正确使用通用兄弟选择器~批量修改后续元素

如何选中目标元素后的所有同级元素

要选中目标元素之后的所有同级元素，只需在 CSS 规则中使用 ~ 符号连接目标选择器和目标元素选择器。例如，div ~ p 会选中所有跟在

 后面的  元素，无论它们之间隔了多少其他标签。
/* HTML结构 */
<div class="container">
  <span>Start</span>
  <div class="trigger">Trigger</div>
  <p>Para 1</p>
  <span>Span 1</span>
  <p>Para 2</p>
</div>

/* CSS规则 */
.trigger ~ p {
  color: red;
  font-weight: bold;
}
运行上述代码后，
Para 1
 和 Para 2 都会变为红色加粗，而 Span 1 不受影响，因为它不是 p 元素。第一个  也不受影响，因为它在 .trigger 之前。
如何处理非直接相邻的兄弟元素
通用兄弟选择器不要求元素紧邻，只要它们在 DOM 树中处于同一层级且目标元素在前即可。这意味着中间可以夹杂任意数量的其他元素，选择器依然能穿透这些干扰项找到后续的目标元素。

/* 复杂HTML结构 */
<section><h2 id="header">Title</h2>
  <div>
    <p>Intro text</p>
    <ul>
<li>Item 1</li>
      <li>Item 2</li>
    </ul>
</div>
  <p>Conclusion</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2905" title="CSS"><img
														src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/gongju/2905" title="CSS" class="overflowclass">CSS</a>
													<p class="overflowclass">CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
												</div>
												<a rel="nofollow" href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</section>

/* CSS规则 */
#header ~ p {
  background-color: #f0f0f0;
}
在此例中，#header ~ p 会选中 
Intro text
 和 Conclusion。尽管 Intro text 被嵌套在  中，但它仍然是 #header 的同级元素（因为它们都是  的直接子元素），所以会被选中。这种穿透能力使得在处理复杂布局时非常有用。当目标元素不存在时会发生什么
如果指定的目标元素在 DOM 中根本不存在，或者没有位于任何目标元素之后的同级元素，那么选择器将不会匹配任何内容，样式也不会应用。这是 CSS 选择器的基本行为：如果没有匹配的节点，就不会产生视觉效果。
<div class="container">
  <p>Para 1</p>
  <p>Para 2</p>
</div>

/* CSS规则 */
.nonexistent-class ~ p {
  color: blue;
}
由于 .nonexistent-class 在 HTML 中不存在，因此没有任何 
 元素会被选中，Para 1 和 Para 2 保持默认样式。这确保了在没有触发条件的情况下，页面布局不会意外改变。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！