CSS 隐藏元素后，如何在指定页面又可出现？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1191 天前的主题，其中的信息可能已经有所发展或是发生改变。

隐藏了某一模块，但在搜索结果页 123.com/?s=xx 又需要它出现
.test {
display:none;
}

该怎么办？能加条件吗？

隐藏

CSS

none

display

4 条回复 • 2021-08-28 09:48:14 +08:00

autoxbc

2021-08-27 21:17:56 +08:00

非标准方法有 @document，不过只能用在 Firefox 上
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@document

我的处理方法是在 js 里加这么一句
document.body.setAttribute('location', location );

然后就可以在 css 里进行地址查询
body:not([location*="123.com/?s="]) .test { display: none; }

P233

2021-08-27 21:18:56 +08:00

借助 js 的话，方法还是很多的

纯 CSS 的话，就不那么优雅了：

1. 给 body 一个 id，例如 #body
2. url 加 hash, 如 123.com/?s=xxx#body
3. 更新 CSS 为 `:target .test { display: block }`

wdssmq

2021-08-27 21:24:23 +08:00

.hidden {
display: none;
}

<div class="test hidden">aa</div>

在搜索而额外加一段

<scripot>
$("div.test").removeClass("hidden");
</scripot>

需要 JQ，虽然也有原生 JS 写法；

也可以通过判断决定要不要加 hidden 类，然而要看具体的前、后端渲染。。

orangejx

2021-08-28 09:48:14 +08:00 via iPhone

在搜索页加一段 css display:block