通過stylish調(diào)整SF首頁樣式來增加識別度

Chao 發(fā)布于2019-08-29 14:08 / 2521人閱讀

摘要：因?yàn)橐ㄟ^不同類型的的來處理樣式，而最外層的父級元素并沒有一個特別標(biāo)識的類名，這個特別標(biāo)識的類名是在最里層，所以只有通過定位方式來處理。不過因?yàn)檫@個標(biāo)簽的父級元素問題，需要增加改變一下定位屬性值。

SF 的首頁改版之后，我不知道大家的感受是怎么樣的，我個人還是不太習(xí)慣，感覺有點(diǎn)雜亂，所有的類別都放在一起了。

為了讓自己舒服一點(diǎn)，于是我又一次打開了 stylish 這個小玩意，修改了一下樣式，最后就是這樣了。

我不知道別人會不會覺得舒服一點(diǎn)，但是我自己覺得舒服了一點(diǎn)了，識別度至少是清楚了。

不過整個的時候，發(fā)現(xiàn)有 SF 首頁有一個地方的 CSS 屬性不知道是做什么用的。

因?yàn)橐ㄟ^不同類型的的 tag 來處理樣式，而最外層的父級元素并沒有一個特別標(biāo)識的類名，這個特別標(biāo)識的類名是在最里層，所以只有通過定位方式來處理。

專欄：#407600 => .middle .news-list .news-item .text-live

問答：#8C5825 => .middle .news-list .news-item .text-qa

專欄：#468ee5 => .middle .news-list .news-item .text-article

頭條：沒有顏色，也沒有類名

找到這幾個之后，再把這里的 a 標(biāo)簽增加一個 :after 定位一下，撐滿外層列表元素的背景就好了。不過因?yàn)檫@個 a 標(biāo)簽的父級元素問題，需要增加改變一下定位屬性值。

然后再把最外層的元素增加一個定位特性，這樣就可以讓 a 標(biāo)簽的 :after 定位在一個列表的位置上的。不過呢，有一個問題就是，當(dāng) a 標(biāo)簽的 :after 定位之后，會覆蓋在內(nèi)容之后，因此需要增加 z-index: -1;，讓背景到內(nèi)容底部去，但是定位好像有點(diǎn)怪怪的，算了，不管，反正這個 :after 是不需要點(diǎn)擊的，那么就再來一個 pointer-events: none;。

嗯，現(xiàn)在這樣就差不多了。所以最后的代碼就是：

.middle .news-list .news-item {position: relative;}
.middle .news-list .news-item .news__item-info .news__item-meta {position: static;}
.middle .news-list .news-item .text-article:after,
.middle .news-list .news-item .text-live:after,
.middle .news-list .news-item .text-qa:after {content:"";position: absolute;top:0;left:0;right:0;bottom:0;background-color:#468ee512;pointer-events:none;}
.middle .news-list .news-item .text-live:after {background-color:#40760012;}
.middle .news-list .news-item .text-qa:after {background-color:#8C582512;}

因?yàn)橹皇鞘醉摚?stylish 中記得加一下域名控制，然后就 OK 了。

如果好奇 background-color:#8C582512; 這里的顏色值為什么這么長，我只想說，因?yàn)槲乙话闱闆r下是用 Chrome 的，然后又有更新癖好，所以，目前是最新版的 Chrome，這個顏色值的最后兩位是透明度。

哦了，搞定，上班……