相邻选择器前后部分之间用一个加号（+）隔开，前后两部分选择反符在结构上属于同级关系，如
立即学习“前端免费学习笔记（深入）”；
相邻选择器，是根据左侧选择符指定相邻元素，然后在该相邻元素后面寻找匹配匹配右侧选择符的相信元素
<!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">
<a class="aritcle_card_img" href="/ai/1088">
<img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6c8959c7f3109.png" alt="通义万相">
</a>
<div class="aritcle_card_info">
<a href="/ai/1088">通义万相</a>
<p>通义万相，一个不断进化的AI艺术创作大模型</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="通义万相">
<span>596</span>
</div>
</div>
<a href="/ai/1088" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="通义万相">
</a>
</div>
</strong></div></body></html>立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
380
收藏
