0

0

vscode怎么选中同一个标签

花韻仙語

花韻仙語

发布时间:2026-03-12 15:36:13

|

202人浏览过

|

来源于php中文网

原创

VS Code 中用 Ctrl+Shift+A(Windows/Linux)或 Cmd+Shift+A(macOS)可选中光标所在位置的成对 HTML 标签,要求光标位于标签名或标签内文本区(非属性值内),且文件语言模式需设为 HTML。

vscode怎么选中同一个标签

VS Code 中快速选中同一 HTML 标签对(开始/结束)

VS Code 默认支持一键选中匹配的开始标签和结束标签,但很多人没触发成功,是因为没在正确的光标位置或没用对快捷键。

光标必须放在标签内部,且不能在属性值里

这是最常踩的坑:把光标停在 <div class="box"> 的 <code>class="box" 里,按快捷键只会选中属性值,不会跳转到闭合标签。必须把光标放在标签名本身或标签内文本区域(比如 <div>|内容</div> 中的竖线位置)。

  • ✅ 正确位置:<div>|</div><div>文本|</div>

  • ❌ 错误位置:<div>、<code><div>|div>(光标紧贴斜杠)、<code><div><p>|</p></div>(嵌套内层标签中)

    Windows/Linux 用 Ctrl+Shift+A,macOS 用 Cmd+Shift+A

    这个快捷键叫「Select Parent Tag」,但实际效果是选中当前光标所在标签的完整开闭对(含中间所有内容)。它不是“高亮同名标签”,而是“定位并选中成对标签”。

    • 如果只有开始标签(如自闭合 <img alt="vscode怎么选中同一个标签" >),它会选中整个自闭合标签
    • 如果光标在
  • 上,也会反向找到对应的 <div> 并选中整段 <li>不支持跨文件、不支持非标准写法(如 <code><div> 大写标签名在部分旧插件中可能失效) <h3>想选中所有同名标签?得靠「Find All Occurrences」</h3> <p>原生功能不提供“选中全部 <code><p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/2019" title="飞书多维表格"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978185950.png" alt="飞书多维表格" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2019" title="飞书多维表格">飞书多维表格</a> <p>表格形态的AI工作流搭建工具,支持批量化的AI创作与分析任务,接入DeepSeek R1满血版</p> </div> <a href="/ai/2019" title="飞书多维表格" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>”这种批量操作,但可以用查找代替:

    • Ctrl+F(macOS Cmd+F),输入 <p></p>
    • 点右上角「Match Case」和「Match Whole Word」按需关闭,避免漏匹配
    • Alt+Enter(Windows/Linux)或 Cmd+Enter(macOS)—— 这会选中所有匹配项,包括开始和结束标签
    • 注意:这会同时选中 <p></p>,但不会自动配对;如果要编辑全部开始标签,建议正则搜索 <p>]*></p>

    真正容易被忽略的是:VS Code 的标签匹配依赖于文件语言模式。如果一个 .html 文件被错误识别为 Plain Text(右下角显示「Plain Text」),Ctrl+Shift+A 就完全不生效。务必点击右下角语言标识,手动设为 HTML

    相关文章

    用vscode怎么把题目放到右上角

    vscode怎么看修改了哪些地方

    怎么让vscode的C程序不闪退

    vscode运行结果出现乱码怎么办

    vscode怎么一下选中一个词

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    上一篇:vscode文字下划线怎么打出来 下一篇:vscode怎么还原隐藏的工具栏

    作者最新文章

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    WorkBuddy
    WorkBuddy

    腾讯云推出的AI原生桌面智能体工作台

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    class在c语言中的意思
    class在c语言中的意思

    在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

    870

    2024.01.03

    python中class的含义
    python中class的含义

    本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

    30

    2025.12.06

    windows查看端口占用情况
    windows查看端口占用情况

    Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

    1496

    2023.07.26

    查看端口占用情况windows
    查看端口占用情况windows

    端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    1170

    2023.07.27

    windows照片无法显示
    windows照片无法显示

    当我们尝试打开一张图片时,可能会出现一个错误提示,提示说"Windows照片查看器无法显示此图片,因为计算机上的可用内存不足",本专题为大家提供windows照片无法显示相关的文章,帮助大家解决该问题。

    835

    2023.08.01

    windows查看端口被占用的情况
    windows查看端口被占用的情况

    windows查看端口被占用的情况的方法:1、使用Windows自带的资源监视器;2、使用命令提示符查看端口信息;3、使用任务管理器查看占用端口的进程。本专题为大家提供windows查看端口被占用的情况的相关的文章、下载、课程内容,供大家免费下载体验。

    463

    2023.08.02

    windows无法访问共享电脑
    windows无法访问共享电脑

    在现代社会中,共享电脑是办公室和家庭的重要组成部分。然而,有时我们可能会遇到Windows无法访问共享电脑的问题。这个问题可能会导致数据无法共享,影响工作和生活的正常进行。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

    2362

    2023.08.08

    windows自动更新
    windows自动更新

    Windows操作系统的自动更新功能可以确保系统及时获取最新的补丁和安全更新,以提高系统的稳定性和安全性。然而,有时候我们可能希望暂时或永久地关闭Windows的自动更新功能。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    874

    2023.08.10

    C# ASP.NET Core微服务架构与API网关实践
    C# ASP.NET Core微服务架构与API网关实践

    本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

    76

    2026.03.11

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    相关下载

    更多

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    go语言零基础开发内容管理系统
    go语言零基础开发内容管理系统

    共34课时 | 2.7万人学习

    第二十三期_前端开发
    第二十三期_前端开发

    共98课时 | 8.3万人学习

    最新文章

    更多
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号