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

微信图片 20241013132554.png

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

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

  • 思源笔记

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

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

    21614 引用 • 85516 回帖 • 1 关注
  • Q&A

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

    7754 引用 • 35324 回帖 • 182 关注

相关帖子

被采纳的回答
  • 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 回复
  • 隐藏搜索项标签,添加以下 css 即可

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

    感谢大佬

推荐标签 标签

  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 596 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 739 关注
  • sts
    2 引用 • 2 回帖 • 188 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 190 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 621 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 18 关注
  • Vditor

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

    346 引用 • 1786 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 626 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    199 引用 • 120 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    165 引用 • 494 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 152 关注
  • RESTful

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

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

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 598 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    403 引用 • 1246 回帖 • 587 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 197 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 38 关注
  • danl
    117 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 58 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 619 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 156 关注