Question

我在div元素中包含一些SVG图标并尝试使用某个CSS类显示图标，同时隐藏所有其他图标。我还尝试在所有这些中使用：not selector，这在Chrome和Safari中运行良好，但在Firefox（48.0.2）中则不行。

以下内容应在Chrome和Safari中同时显示文字和图标，但仅显示Firefox中的文字：

    <style>
        div:not(.foo) svg       { display: none; }
        div:not(.foo) svg.bork  { display: block; }
        div:not(.foo) span      { display: none; }
        div:not(.foo) span.bork { display: block; }
    </style>

    <svg display="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="icon">
            <path xmlns="http://www.w3.org/2000/svg/" d="M4.478,26.134,35.037,56.693,4.478,87.252a15.313,15.313,0,1,0,21.656,21.656L56.693,78.349l30.559,30.559a15.313,15.313,0,0,0,21.656-21.656L78.349,56.693l30.559-30.559A15.313,15.313,0,0,0,87.252,4.478L56.693,35.037,26.134,4.478A15.313,15.313,0,0,0,4.478,26.134Zm19.86-19.86L46.452,28.388,54.9,36.833l1.8,1.8,1.8-1.8L66.319,29,89.048,6.274a12.773,12.773,0,0,1,18.064,18.064L84.383,47.067l-7.83,7.83-1.8,1.8,1.8,1.8,5.317,5.317,25.242,25.242a12.773,12.773,0,0,1-18.064,18.064L63.806,81.87l-5.317-5.317-1.8-1.8-1.8,1.8-6.562,6.562-24,24A12.773,12.773,0,1,1,6.274,89.048l24-24,6.562-6.562,1.8-1.8-1.8-1.8-8.445-8.445L6.274,24.338A12.773,12.773,0,0,1,24.338,6.274Z"></path>
        </symbol>
    </svg>

    <div class="bar">
        <span>This text should not be displayed</span>
        <span class="bork">This text should be displayed</span>
        <svg class="bork" xmlns="http://www.w3.org/2000/svg/">
            <use xlink:href="#icon"></use>
        </svg>
    </div>

https://codepen.io/jfvaren/pen/wzoxEG

我包含了span元素以表明问题只影响svg元素。有谁知道为什么？

无法在Firefox中使用：不是围绕SVG的CSS选择器

0 个答案: