需求很簡單，比方說有時候會關注幾個專職搬運視頻的號，然后就會發現他們會發些很煩人的圖文動態。視頻還是想看的，所以需要精確的只屏蔽特定用戶的圖文動態。b 站本身似乎沒這種功能，因為我主要是電腦上瀏覽器看看b 站動態，所以決定用瀏覽器的廣告屏蔽插件來實現，具體而言，就是添加一條自定義屏蔽規則。

屏蔽插件

我用的firefox 瀏覽器，插件是這個Adblocker Ultimate，用了挺長時間了，效果一直很強力，除了偶爾會遇上針對廣告攔截的，不過規則更新也挺勤快。Chrome 應該也有這個。

廣告屏蔽插件的原理多種多樣，比如可以直接阻止網絡請求、停止腳本的，最簡單的類型是根據規則匹配頁面上的某個元素，然后把這個元素隱藏掉，正適合拿來做黑名單屏蔽。

要添加自定義規則可以點開設置，里面就有個自定義規則標簽頁：

每行寫一條規則，自動保存。

規則語法

基本的規則語法可以參考這個：Adblock Plus filters explained，差不多是通用。如果要選擇并隱藏某個域名下頁面中某個或者某一類元素，基本思路就是用CSS 選擇器，類似這樣：

t.bilibili.com##.target-css

## 后面跟的是標準的CSS 選擇器語法，這條規則會把t.bilibili.com 域名下頁面上所有.target-css 類的元素隱藏掉。要做的就是打開瀏覽器控制臺，分析頁面結構，看看要隱藏的那個元素有什么特別之處。

偽選擇器

當然只用標準的CSS 選擇器能做的很有限，所以規則中也擴展了所謂的偽選擇器（pseudo-selector），形式上有點像CSS 偽類，比如這樣：

t.bilibili.com#?#div:has(span:contains(今天給大家推薦))

用了偽選擇器的規則要把## 變成#?#。這條規則的意思是：屏蔽頁面上滿足條件的div 元素，這些div 的子元素有span ，而這個span 內部的文本含有“今天給大家推薦” 這么幾個字。

上面的例子用了偽選擇器:has 和:contains 。:has(expr)的意思是，冒號前的元素，其子元素中含有滿足CSS 表達式expr 的元素，如果滿足這個條件，冒號前的元素就被選中。偽選擇器可以嵌套，所以括號里的CSS 表達式還可以包含偽選擇器。:contains(text) 也很簡單，就是檢查冒號前元素的內部文字是否包含text，滿足條件就選中。

所以包含偽選擇器的CSS 表達式需要滿足兩個條件才能選中某個元素，首先就是滿足CSS 選擇器，在這個基礎上，用CSS 選擇器選中的元素還要滿足偽選擇器的條件才能最后被選中。

偽選擇器并列語法

除了嵌套，偽選擇器還可以并列，比如：

t.bilibili.com#?#div:has(span):has(table)

這條規則也是選中div 元素，這個div 要滿足兩個條件，首先是含有span 元素，同時還要含有table 元素。有了這種語法就可以把多個條件組合到一起，實現復雜的選擇功能。

其他偽選擇器

基本上偽選擇器的用法可能都要參考別人的規則文件，反正我是沒找著成體系的文檔。常見的偽選擇器就是:has()，:contains() ，再加一個:not()，就是和:has() 的效果相反，選中不滿足條件的。

屏蔽動態

現在可以開始研究如何屏蔽動態了。打開瀏覽器控制臺，可以看到：

每條動態卡片就是一個div.bili-dyn-list__item，把這個元素整個刪掉，對應的動態就完全沒了。所以基礎的屏蔽規則就是：

t.bilibili.com#?#div.bili-dyn-list__item

當然只是這么寫的話所有動態都沒了，接下來就開始用偽選擇器，需要實現兩個條件：

匹配特定用戶，其他的原樣保留

匹配圖文動態，其他的原樣保留

兩個條件可以分開考慮，最后并列起來就行。

匹配特定用戶

最簡單的想法是看看動態卡片里有沒有哪個鏈接或者別的元素帶有指向用戶頁面的鏈接，有的話就能精確的根據用戶鏈接或者id 做匹配。我已經找過了，沒有[doge]。所以退而求其次，直接匹配顯示出來的用戶名文本。鼠標放在用戶名上檢查元素，可以看到基本是這樣的結構：

就是找到這個地方的一個span，它的內部文本匹配用戶名。那么上面的基礎規則就可以改成：

t.bilibili.com#?#div.bili-dyn-list__item:has(div.bili-dyn-item__header div.bili-dyn-title span:contains(少女前線后勤組))

意思是要求最前面的動態卡片div 里面有一個span，span 的內部文本又要匹配用戶名，span 前面加了一串元素層級是為了提高容錯度，保證選擇的是這個表示用戶名的span。

只用這條規則的話，這個用戶的所有動態都會被屏蔽。

匹配圖文動態

總之是要找到圖文動態和其他動態不同的地方，然后匹配這個差異點。我發現的是這個：

只有圖文動態有這樣的結構，對應動態里面的正文部分。所以基礎規則改成這樣：

t.bilibili.com#?#div.bili-dyn-list__item:has(div.bili-dyn-content__orig__desc > div.bili-rich-text)

div.bili-rich-text 元素在其他地方也有出現，所以要用css 表達式限制這個父子元素關系。

用這條規則可以無差別屏蔽所有圖文動態

并列

然后就很簡單了，把上面兩個條件中的偽選擇器表達式并列起來，就能表達關系與，實現只屏蔽特定用戶的圖文表達式，規則如下：

t.bilibili.com#?#div.bili-dyn-list__item:has(div.bili-dyn-item__header div.bili-dyn-title span:contains(少女前線后勤組)):has(div.bili-dyn-content__orig__desc > div.bili-rich-text)

注意中間不要加空格。把用戶名換成別的，復制粘貼幾次就能屏蔽更多用戶。

總結

總之還挺好用的，基本上無痕，對瀏覽器性能也沒感覺有什么影響。規則語法簡單直觀，不像正則那樣堪比玄學，希望大家都學會了。

注

如果要屏蔽轉發動態，可以把div.bili-dyn-content__orig__desc 改成div.bili-dyn-content__forw__desc。如果圖文和轉發都要屏蔽，那就復制粘貼，兩條都寫上。

總結

以上是生活随笔為你收集整理的Adblock 插件规则语法实现B 站动态黑名单 - 隐藏特定用户的图文动态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。