CSS 伪类选择器 :fullscreen 针对以全屏模式显示的元素并设置其样式。如果在全屏模式下设置了多个元素，则此伪类将选择所有元素。
通常，此伪类与 ：：backdrop 伪元素一起使用，以设置全屏元素后面的背景样式。
伪类 :fullscreen 允许配置样式表，以便在元素在全屏和正常模式之间来回切换时自动调整内容的布局、样式或大小。
全屏堆栈中的所有元素仅在 Firefox 浏览器上受支持。
全屏堆栈中的所有元素仅在 Firefox 浏览器上受支持。
语法
:fullscreen {
/* ... */
}
CSS ：全屏示例
以下示例演示了伪类 :fullscreen 的用法。在此示例中：
- 名为 sample-div 的 div 的样式为浅灰色。
- 此 div 上的 <p> 元素设置为不可见。
- 一个按钮是通过 javascript 添加的，并使用 id=sample 进行标识。
- 当单击按钮时，会在 div 和 p 元素上应用 :fullscreen 伪类，从而使其以浅鲑鱼色全屏显示，并且 p> 元素的文本在屏幕上可见。
- 按 Esc 键返回。
<html>
<head>
<style>
.sample-div {
padding: 10px;
height: 200px;
width: 95%;
background-color: lightgrey;
}
.sample-div p {
visibility: hidden;
position: absolute;
top: 40%;
width: 100%;
text-align: center;
font-size: 1.5em;
color: black;
}
.sample-div:fullscreen {
background-color: lightsalmon;
width: 100vw;
height: 100vh;
}
.sample-div:fullscreen p {
visibility: visible;
}
</style>
</head>
<body>
<h2>:fullscreen example</h2>
<div>
<div class="sample-div" id="sample">
<p>Fullscreen mode</p>
</div>
<br>
<button onclick="var el=document.getElementById('sample'); el.webkitRequestFullscreen();">Click here</button>
</div>
</body>
</html>
