一、相邻选择器
相邻选择器前后部分之间用一个加号（+）隔开，前后两部分选择反符在结构上属于同级关系，如
立即学习“前端免费学习笔记（深入）”；
相邻选择器，是根据左侧选择符指定相邻元素，然后在该相邻元素后面寻找匹配匹配右侧选择符的相信元素
二、简单例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>相邻选择器</title><style type="text/css">/*选择中id为wrap最下的p标签使用相信选择器*/#sub_wrap + p{ font-size:22px; color:red; }</style></head><body><div id="wrap"><div id="sub_wrap"><h2 class="news">标题2</h2><p class="news">标题2下的段落</p><span class="news">标题2下的span</span></div><strong><p>相邻段落</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1723" title="剪刀手"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680316942176.png" alt="剪刀手" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1723" title="剪刀手">剪刀手</a>
<p>全自动AI剪辑神器：日剪千条AI原创视频，零非原创风险，批量高效制作引爆流量！免费体验，轻松上手！</p>
</div>
<a href="/ai/1723" title="剪刀手" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></strong></div></body></html>
立即学习“前端免费学习笔记（深入）”；
