#1 - 2023-12-17 15:44
NekoNull
## 这是什么？
一个很简单的小工具，选中某个页面元素（可以鼠标滚轮调整范围），左键确认后会隐藏其他的元素，隐藏后按 ESC 就能恢复。

## 为什么做这个
- 我用的翻译插件是「沉浸式翻译」，但是默认情况下会翻译整个网页，然而一般我只关心主体，不关心导航栏、侧边推荐、底部链接；默认的行为会导致无谓的翻译 API 请求，更容易遇到频率限制。
- 沉浸式翻译自带了一个仅翻译网页主体的功能，但是标注了「不建议开启」，我自己测试下来有的时候也会有误判，所以还是倾向于自己来选择主体。
- 虽然有不少 Chrome 插件可以删除网页元素，但是像我这样仅保留（反向删除）的我还真没找到，最后就干脆趁着周末自己搞一个了。

## 原理
选中元素之外的元素上加 `display: none`，按 ESC 取消的时候再删掉

## demo


## 地址
https://github.com/jerrylususu/mainonly/tree/main
#2 - 2023-12-19 07:30
posthumz (Life, what is it but a dream?)
其实好像没有必要对于所有其他元素添加mainonly-hidden，可以用:not()选择器
.mainonly { outline: 2px solid red; }

:not(.mainonly) { display: none; }
然后需要隐藏/显示的时候添加/移除第二行的style就行了
#2-1 - 2023-12-19 21:26
NekoNull
学到了，原来还可以这样！之后有空来更新一版
#2-2 - 2023-12-19 22:44
NekoNull
试了试，发现 `:not` 实现在我的设备上会导致严重卡顿，不太确定原因，先保持现状了 (bgm38)
#2-3 - 2023-12-20 18:12
posthumz
NekoNull 说: 试了试，发现 `:not` 实现在我的设备上会导致严重卡顿，不太确定原因，先保持现状了
其实我看了一下光:not还不够(bgm38)，还得要:has或者用js模拟一下:has。
改了一下发现好像没啥问题？要不试试看我那个PR
#2-4 - 2023-12-20 21:37
NekoNull
posthumz 说: 其实我看了一下光:not还不够，还得要:has或者用js模拟一下:has。
改了一下发现好像没啥问题？要不试试看我那个PR
感谢PR！(bgm105) 稍后来试试看
#2-5 - 2023-12-20 22:35
NekoNull
posthumz 说: 其实我看了一下光:not还不够，还得要:has或者用js模拟一下:has。
改了一下发现好像没啥问题？要不试试看我那个PR
试了下minified的版本，发现整个页面都没了 (bgm38)
可能是有兼容性问题？
#2-6 - 2023-12-21 03:28
posthumz
NekoNull 说: 试了下minified的版本，发现整个页面都没了
可能是有兼容性问题？
我的锅，css规则写漏了一个(bgm38)，现在再试试看呢
#2-7 - 2023-12-22 21:04
NekoNull
posthumz 说: 我的锅，css规则写漏了一个，现在再试试看呢
这次OK了，已经合入，感谢！