由于语雀不支持较复杂的排版，建议阅读微信公众号原文，获得更棒的体验：
我之前写过这样一篇文章《stylish 给网页换个皮肤》，其中提到了 stylish，他除了可以美化网页外，还能进行广告屏蔽。
今天就用它配合一款油猴插件，对网页上的图片浏览页面进行设计，实现清爽看图的功能。
1. stylus 网页页面重新设计
今天说到的这个 stylus 可以说是 stylish 更好的替代品。
由于 stylish 涉嫌窃取用户浏览历史，曾被下架。而且 Stylish 扩展原作者在 2016 年 8 月将其出售，变成了一个商业软件。而 Stylus 是一个基于 Stylish 1.5.2 版本开发的分支，这是 Stylish 原作者维护的最后一个版本。在此基础上，Stylus 重写并优化了大部分代码来提升性能。
Stylus 的使用方法和 Stylish 基本一致，就不做过多介绍了，不懂的可以看一下上篇文章。
之前我提到过，使用 display:none; 可以隐藏页面的元素，但对如何选择页面的元素没有详细地说明，这里来介绍一下，如何用 CSS 选择器来进行元素的选择（介绍我们可能会用到的）：
：统配选择器，表示选择所有的元素 TAG：表示选择某标签的元素，比如 div、p、body 等 *.CLASS：表示选择 class=”CLASS” 的元素
ID：表示选择 id=”ID” 的元素
？:not(NOT)： 伪类选择器，表示排除括号内的所有符合？特点的元素，类似于逻辑中的 “非” FATHER>SON：子代选择器，表示选择 FATHER 内部的 SON 元素，且 SON 是 FATHER 下面的第一层级 YUAN,SU：组合选择器 “,”，表示选择 YUAN 和 SU 这两个元素，同时对其应用相同的样式，类似逻辑中的 “或” .YUAN.SU：我们可以直接在前一个选择器后加另外一个选择器，来同时选中具有这两个特性的元素，类似逻辑中的 “与” 另外，上面这些选择器可以组合使用，更加强大！
好了，我们通过具体的实例来讲解一下如何应用：
比如我们的这个页面 https://www.tp8.com/fengjing/weimei/18645.html
我们直接定位到图片的位置，（如何定位请查看《这篇文章》）可以看到他的框架结构基本如下：
<body><div class="header h-pub"></div><div class="position"></div><div class="pic"><div class="w1200"><h1>厦门美景图片 (1/6)</h1><div class="pic-info">图片信息</div><div class="pic-main"><a href="/dongwu/xiaoniao/16535_2.html" title="下一页"><img src="src.jpg" alt="图片备注"></a></div><div class="page">上一页下一页</div><div class="pic-l">标签</div><div class="pic-a">上\下一篇</div><div class="clear"></div></div></div><div class="channel c-pub"></div><div class="channel2 c-pub mb40"></div><div class="label mb30"></div><div class="footer"></div></body>
而其中的 .pic-main 是我们的主角，是要保留的，其他的我们都可以忽略。
首先我想到的是：
*{display:none;}.pic-main{display:block;}
但这种方法会杀掉主角. pic-main 的前辈（父亲、爷爷等）元素. pic 等，如果没有前辈元素. pic，也就没有了. pic-main。
那么如何做到保留主角这一枝人呢？
首先要保留主角的祖宗. pic，也就是 “杀掉” 其他同级与. pic 竞争的元素，用代码：
body>*:not(.pic){display:none;}
为避免 “滥杀无辜”，比如. pic 的后代还有. pic 的转世，我们使用子代选择器（仅选择它的儿子，不包括它的孙子、重孙子等）“>”，保证只 “杀掉” 祖宗. pic 的兄弟姐妹，而不会影响到. pic 的转世的兄弟姐妹。
接下来在. pic 的儿子中，只有 “.w1200” 这个主角的父亲，也就是说，在这级中，直接自然选择就可以了，不用再进行人为干预（“杀” 掉其兄弟姐妹）。
之后就到了主角这一代，他有很多的兄弟姐妹，同样，使用之前的原则就可以了：
.w1200 > *:not(.pic-main){display:none;}
由于. w1200 这一代就他一个独苗，因此省略了中间的一步。
2. 正则表达式实现样式的应用
到这里样式修改的部分已经完成了，接下来就是将它应用到类似的网页。
我们不能将它应用到所有网页，比如它的上一级页面：https://www.tp8.com/dongwu/xiaoniao/，如果一个网页中没有 “.pic”，页面所有的元素都会消失。
我们也不可能添加所有的网页，毕竟一个网站的页面有很多个，但我们可以打开几个类似的网页，总结这些网页的规律，比如该站上的页面：
- https://www.tp8.com/dongwu/xiaoniao/16535.html
- https://www.tp8.com/dongwu/xiaoniao/19342.html
- https://www.tp8.com/dongwu/maomi/541.html
通过总结，我们可以发现，https://www.tp8.com / 后面是一个分类，之后是具体的图片细节网页。
第一次我用了这个正则表达式：https://www.tp8.com/.*
其实标准的正则表达式需要进行转义，但这部分插件已经帮我们做好了。
可是问题出现了，这个正则表达式同时匹配了https://www.tp8.com/dongwu/xiaoniao / 这个 总结页面 ，这是我们不希望看到的。
如何排除类似这样的总结页面呢？我们可以在原来的表达式后面增加限定 “\d.“，这个表示后面必须有一个数字，之后可以是任意字符。完整的表达式为：[http://www.tp8.com/.\\d.*](http://www.tp8.com/.*%5Cd.*)
到这里，stylus 就可以基本执行了。
这里解释一下：正则表达式中的\d 表示数字，.*表示任意字符。
3. 脚本实现自动加载
下一步，就是实现自动加载下一页的功能。
这里我找到了一个油猴插件：Super_preloaderPlus_one，油猴使用方法请自行搜索。
大家可以到油猴插件的网站搜索下载，也可以后台回复 “清爽看图” 获取代码。
但这个脚本会在页面上生成一个小图标，我们之前的那个代码 body>*:not(.pic) 也包括了这个小图标。因此，我们同样需要排除这个 div，而他在页面中是这样的：
因此，我们需要在第一个代码中排除这个，也就是说用下面的代码：
ody>*:not(.pic):not(#sp-fw-container){display:none;}
如果你想应用在多个网站中，这个代码就需要在每个代码段中的 body 下进行排除。
之后插件的使用就比较简单了，勾选 “使用翻页模式” 就可以了。
好了，大概就这些了，看下浏览的效果：
祝看图愉快！
如果觉得我的文章还不错，欢迎点赞、转发、评论啊！
若有收获，就点个赞吧
0 人点赞
