css：否定全屏選擇器不起作用

Question

我試圖理解，為什么否定:fullscreen ，即:not(:fullscreen)不能按預期工作。

有關演示，請參閱https://jsfiddle.net/rmjae4Lc/ （它適用於body ，但不適用於p ）。

 :fullscreen button { background-color: green; } :not(:fullscreen) body { background-color: gold; } :not(:fullscreen) p { background-color: orange; } div { background-color: blue; } :fullscreen div { background-color: white; }

 <button onclick="if (document.fullscreenElement) {(document.exitFullscreen || document.webkitExitFullscreen).call(document)} else {var elem = document.documentElement; (elem.requestFullscreen || elem.webkitRequestFullscreen).call(elem)}">toggle fullscreen</button> <p> Negating fullscreen works for body but not for div. In fullscreen mode body turns white, but div stays orange. </p> <div> A work around. </div>

（在此處運行代碼段，拋出Fullscreen request denied 。因此使用上面的 jsfiddle 鏈接。）

Answer 1

我找到了一個簡單的解決方法（在 Chrome、Edge、Firefox 上測試過）：

html:not(:fullscreen) p {
    background-color: orange;
}