使用 CSS 对 dev.to 进行一些修改

问题：懒惰的开发人员无法保存

解决方案：调整 CSS

问题：懒惰的开发人员无法保存

当您浏览此网站时，您会看到这样的标题，有时还会有描述、图像和标签。

所以你有两个选择：要么打开阅读，要么保存以后再看。有时候标题很棘手，就像你现在正在读的这篇文章一样。也许你觉得它很有趣，但实际上它是为了吸引浏览量/点赞等而设的陷阱。让我们打开这篇文章看看里面有什么。

太棒了！这篇文章读起来很棒，有很多有价值的信息。不过等等，你得赶紧赶火车，所以你决定保存这篇文章。

保存按钮要么在上一页，要么在当前文章底部，文章侧面没有保存按钮，方便以后保存。或许你可以用 ctrl + d 来添加书签，但那样太无聊了。

我们可以等团队帮我们搭建一个，也可以自己搭建一个。偶尔摆弄一下小东西，是不是很棒？

解决方案：调整 CSS

好的，我们先提取选择器。我右键单击，选择“检查元素”，它会像这样高亮显示。

现在我们知道该打破什么了。让我们为选择器写一些 CSS 代码，

#article-reaction-actions {
    position: fixed; /* This will make it floating around */
    z-index: 1000000; /* Just to make sure it's on top of everything */
    bottom: 0; /* So it stays sticky to bottom of my screen */
    background: white; /* Well it's transparent otherwise */
    width: 880px; /* The size of the parent container */
}

我不打算讨论上面代码片段中每个字母的作用。我现在懒得这么做。

为了应用样式，我将使用Stylish，这是一个 Chrome 扩展程序。它也有Firefox和Safari版本。

让我们创建一个新的风格。当我阅读这篇文章时，我会安装 chrome 扩展程序，回到这篇文章，然后单击图标。

然后我将使用上面的代码片段，输入一个好听的名字并保存。

太好了，现在我刷新页面，就可以看到这个，

很棒，不是吗？我可以用它读前几行，然后决定保存或收藏，而不用滚动到最后。

附言：

• 这只是为了解闷，不过我在很多不同的网站上都用过 Stylish。如果需要的话，我也会用 Tampermonkey 来调试 JS。
• 请不要为了这篇文章而修改网站或创建 Chrome 扩展程序。这没什么大不了的。
• 抱歉，未经许可就使用图片上的帖子：D，这是 dev.to，所以我想这不会造成损害。