请问标签搜索界面如何通过 css 隐藏重复显示?

本贴最后更新于 193 天前,其中的信息可能已经物是人非

微信图片 20241013132554.png

比如第一个搜索结果,我只想它显示路径为【剪辑】,而不是将页面标题又显示一次,这会导致下面路径很长,不美观。

求各位大佬给出 css 代码,能不能解决掉。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25230 引用 • 104045 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9646 引用 • 43853 回帖 • 95 关注

相关帖子

被采纳的回答
  • wilsons 2

    css 无法实现,得用 js 实现,下面的代码不知是否满足你的需求,仅供参考。

    (()=>{ // 监听搜索项出现 observeElementExist('div[data-type="search-item"]', (element) => { const ariaLabel = element.querySelector('.b3-list-item__meta:last-child'); if(!ariaLabel) return; const itemText = element.querySelector('.b3-list-item__text')?.textContent || ''; if(!itemText) return; const paths = ariaLabel?.textContent?.split('/'); if(!paths) return; const lastPath = paths?.pop(); if(!lastPath) return; if(itemText !== lastPath) return; ariaLabel.textContent = paths.join('/'); }); // 监听元素出现 function observeElementExist(selector, callback) { const handleMutations = (mutationsList, observer) => { for (let mutation of mutationsList) { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.matches && node.matches(selector)) { callback(node); //observer.disconnect(); // 一旦找到元素,停止监听 } }); } } }; // 创建一个MutationObserver实例 const config = { attributes: false, childList: true, subtree: true }; const observer = new MutationObserver(handleMutations); // 选择需要监听的父节点 const targetNode = document.body; // 或者选择其他合适的父节点 // 开始监听目标节点的变化 observer.observe(targetNode, config); } })();

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons 2 1 评论

    css 无法实现,得用 js 实现,下面的代码不知是否满足你的需求,仅供参考。

    (()=>{ // 监听搜索项出现 observeElementExist('div[data-type="search-item"]', (element) => { const ariaLabel = element.querySelector('.b3-list-item__meta:last-child'); if(!ariaLabel) return; const itemText = element.querySelector('.b3-list-item__text')?.textContent || ''; if(!itemText) return; const paths = ariaLabel?.textContent?.split('/'); if(!paths) return; const lastPath = paths?.pop(); if(!lastPath) return; if(itemText !== lastPath) return; ariaLabel.textContent = paths.join('/'); }); // 监听元素出现 function observeElementExist(selector, callback) { const handleMutations = (mutationsList, observer) => { for (let mutation of mutationsList) { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.matches && node.matches(selector)) { callback(node); //observer.disconnect(); // 一旦找到元素,停止监听 } }); } } }; // 创建一个MutationObserver实例 const config = { attributes: false, childList: true, subtree: true }; const observer = new MutationObserver(handleMutations); // 选择需要监听的父节点 const targetNode = document.body; // 或者选择其他合适的父节点 // 开始监听目标节点的变化 observer.observe(targetNode, config); } })();
    1 回复
    1 操作
    wilsons 在 2024-10-13 16:42:30 更新了该回帖
    大佬牛
    i1356
  • i1356

    再次请教一下大佬,是否有方法将红框中的标签也去除掉。

    微信截图 20241013183531.png

    1 回复
  • wilsons 1

    隐藏搜索项标签,添加以下 css 即可

    :not(#modelMain) div[data-type="search-item"] > :nth-child(3) { display:none; }
    1 回复
  • i1356

    感谢大佬

推荐标签 标签

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    367 引用 • 1844 回帖 • 3 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 317 关注
  • 倾城之链
    23 引用 • 66 回帖 • 166 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 6 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    187 引用 • 318 回帖 • 256 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 343 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 17 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖 • 1 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    58 引用 • 25 回帖
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 178 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 164 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 644 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1057 回帖 • 4 关注
  • Follow
    4 引用 • 12 回帖 • 13 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 1 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 611 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1243 回帖 • 411 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 111 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 548 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 668 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3198 引用 • 8215 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    289 引用 • 4492 回帖 • 655 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 668 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    133 引用 • 1124 回帖 • 116 关注