关于去除 000webhost 主机免费版右下角的广告条水印的解决方案

前言

000webhost 虚拟主机的确挺好用，也免费。但美中不足的是他会给你在右下角加一个 “Powered By 000webhost" 的水印（如下图1），很影响网站体验。而且这东西在不科学上网的情况下经常背景还加载不出来，是很丑的一条（如下图2）。

           图1 就是这玩意儿

 

        图2 加载不出来时

本文将介绍如何去除这个广告条。

正文

观察

经过观察，我们发现，这个广告条会被000webhost在返回网页的时候加在 body 的最后面，而且恶心的是它并没有 id 或 class(有就怪了，就是不想让我们隐藏而已)，还在HTML中 !important 了 style 的 display 样式，使我们不能通过 设置 display:none 来隐藏他。

不过就真的没办法了吗？

不，魔高一尺道高一丈。

匹配元素

我们可以使用 CSS3 新增的 :last-of-type 选择器来匹配他。最好在 body 最后先手动加一个  <div style="display:none"></div> 。原因：如果 000webhost 哪天抽风了，这个广告条元素突然没掉，或者移动位置了，那我们不至于被自己写的 CSS 隐藏掉本身网站的元素。

匹配很好写：

body > div:last-of-type

隐藏元素

由于这个元素在 style 中 !important 了 display 属性，所以我们不太可能用 display 去覆盖他了。

但是我们可以将它的宽高都设为 0，绝对定位移出屏幕。

body > div:last-of-type{
    display:none !important;
    position:fixed !important;
    bottom:-9999px !important;
    right:-9999px !important;
    width:0px !important;
    height: 0px !important;
}

结语

至此，这个元素被我们成功隐藏，更激进的方法是直接把 </body> 标签删除，这样 000webhost 就无法找到 body 的结束位置了。虽然浏览器会自动加上，网页显示还是差不多，但是不推荐这么做。