CSS选择器技巧：精准定位紧邻兄弟元素

本文探讨如何利用CSS选择器精准选中特定HTML元素，此例中，目标是选中紧跟在ul标签后的p标签。

问题：

假设HTML结构如下：

<code class="html"><div>
  <p>段落一</p>
  <p>段落二</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>  <!-- 选中这个p标签，紧邻下一个兄弟元素是ul -->
  <ul><li>列表项</li></ul>
</div></code>

如何仅选中“段落二”这个p标签？

解决方案：

可以使用p + ul ~ p 选择器。

• p + ul: 选中紧跟在p标签后的ul标签。+表示紧邻的兄弟元素。
• ~ p: 选中所有后续的p标签兄弟元素。~表示后续的兄弟元素。

因此，p + ul ~ p 将选中所有满足条件的p标签。 此方法避免了使用较新的p:has(+ ul)选择器，确保更广泛的浏览器兼容性。

需要注意的是，虽然p:has(+ ul) 选择器更简洁直接，但目前浏览器原生支持度有限。 p + ul ~ p 则提供了更好的兼容性，在实际项目中更可靠。

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