全局CSS导入
全局CSS导入!
Today's Installations
0
Total Installations
276
Creation Date
9 months ago
Update Date
3 days ago
User Rating
No Rating
v1.0.2GPL-3

全局CSS导入

简介

向页面中储存 CSS 规则, 打开对应网站的时候会自动添加自定义的 CSS 规则到页面上.

按钮 - 修改CSS

点击页面后, 页面中心会出现一个弹窗, 有两个输入框:

image.png

当前页面CSS

上面的大输入框是即将载入页面的 CSS 文本, 语法内容和正常 CSS 样式文件一样输入.

  • 输入内容后, 离开文本框之后, 会显示 CSS 语法高亮.
  • 需要点击 "保存" 按钮之后, 内容才会保存并载入页面.

快速隐藏元素

下面的输入框 "快速隐藏元素" 是上面的补充, 在里面输入 CSS 选择器之后, 点击 "确定" 按钮或者按下 Enter , 可以快速将该元素添加到上面的 CSS 内容, 并添加上隐藏样式 {display: none !importtant;}.

比如, 在 "快速隐藏元素" 输入框输入 .test , 点击 "确认" 之后, 在上面的 当前页面CSS 输入框的最后会新增一行文本: .test {display: none !importtant;}

示例

屏蔽元素

这里以屏蔽B站的UP主发的淘宝广告为例.

04.jpg

通过开发者工具找到B站动态的每一个动态都是一个 .bili-dyn-list__item 容器, 有广告的动态就有淘宝的链接图标, 再往下找就能找到淘宝图标用的是一个 .goods.icon--taobao 元素.

所以包含广告的动态卡片的选择器是: .bili-dyn-list__item:has(.goods.icon--taobao).

image.png

改变页面CSS布局

由于本质上就是往页面中写入 CSS , 所以改页面布局也是可以的, 这里简单说明一下.

还是以B站动态为例. 在某个版本之后进入UP主主页之后的动态下的按钮会是一个两端对齐的状态, 不如之前的都是居左按钮的方便, 所以将其改回居左的状态.

02.png

首先找到底部按钮对应的 div 容器 .bili-dyn-item__footer , 然后看到原有的属性是:

.bili-dyn-item__footer {
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-right: 20px;
}

这里需要将 justify-content: space-between; 属性覆盖掉变成 justify-content: left;, 所以我们写入的 CSS 规则优先级稍微比原来高一些即可.

所以输入 div.bili-dyn-item__footer {justify-content: left;}, 所有的动态按钮就都会居左了.

image.png

03.png

同理, 只要是页面布局, 只要优先级能够覆盖掉原来的样式所有的页面都可以改.

(全部使用 !important 强制覆盖也不是不行)

更新计划

  • 更好的CSS规则写入页面的方式
  • 更好的UI
  • 更好的存储
  • 完整的CSS规则的增删改查
  • CSS高亮
  • 右键菜单选择快速屏蔽元素
Script Score
empty image
No one has rated the script yet. Be the first to rate it!