html - CSS 过滤器 : Wikipedia: Inline math's background is not transparent

Question

前几天，我写了一个用于为维基百科创建深色模式的 Chrome 扩展，玩得很开心。一切顺利，但后来我注意到了一些瑕疵:

Screenshop snippet of artifacts.

对应的html是:

<span class="texhtml">
<i>ω</i>
<span style="position:relative; 
    margin-right:-0.75em; 
    right:0.75em; 
    bottom:0.75em;;">
        <small>→</small>
</span>

... 来自网站:https://en.wikipedia.org/wiki/Vorticity

我找不到此跨度或其中任何其他节点的任何背景 css 设置...当我在我的扩展程序中更改背景设置时，没有任何反应。

这是我的扩展程序加载的 css 文件:

:root                                                                              
{                                                                                  
    /* COLOR DEFINITONS */                                                         

    /* Color palette from hackaday.com */                                          
    --background: rgb(30,30,30);                                                   
    --text: rgb(221,221,221);                                                      
    --border: rgb(72,72,72);                                                       
    --links: rgb(23,168,250);                                                      
}                                                                                  

/* Remove top banner */                                                            
#cnotice-main                                                                      
{                                                                                  
    display: none !important;                                                      
}                                                                                  

/* Borders */                                                                      
*                                                                                  
{                                                                                  
    border-color: var(--border) !important;                                        
}                                                                                  

/* Links */                                                                        
a                                                                                  
{                                                                                  
    color: var(--links) !important;                                                
}                                                                                  

/* Invert Wikipedia Logo */                                                        
#p-logo                                                                            
{                                                                                  
    filter: invert(100%) !important;                                               
}                                                                                  

/* Change colors where appropriate */                                              
body, #content,                                                                    
*[class~='navbox'], td, #simpleSearch,                                             
*[class^='suggestions'], *[class^='special-'], input,                              
#mw-head, table, div[id='catlinks'], div[class^='thumb'],                          
table[class^='wikitable'], th, span[class='tocnumber'],                            
*[id^='p-namespaces'], *[id^='p-view'], span, li,                                  
div[class^='mw-'], *[class^='Nav'],                                                
*[id^='mwe-popup'],                                                                
*[class^='mwe-popup'],                                                             
*[id^='mp-'], div[id='toc'],                                                       
h1, h2, h3, h4, h5, h6                                                             
{                                                                                  
    background-image: none !important;                                             
    background-color: var(--background) !important;                                
    background: var(--background) !important;                                                                                                              
    color: var(--text) !important;                                                 
}                                                                                  

/* DOES NOT WORK, i.e. background is still solid grey. */                          
[class='texhtml']                                                                  
{                                                                                  
    background rgb(0,0,0,0.5) !important;                                          
}                                                                                  

/* Latex formulae */                                                               
.mwe-math-fallback-image-inline                                                    
{                                                                                  
    filter: invert(100%);                                                          
}           

任何帮助将不胜感激!

Answer 1

您可以使用 CSS 为每个跨度设置背景。

您应该从选择器中排除该标签:而不是将背景应用于每个 <span>标记，你应该尝试:

span:not(.texhtml),
span:not(.texhtml) span