CSS :popover-open 부류

정의와 사용법

CSS :popover-open 부류는 팝업 상태에 있는 모든 요소의 스타일을 선택하고 설정하는 데 사용됩니다.

기본적으로, 브라우저는 뷰포트의 중앙에 팝업을 표시합니다.

브라우저에서 팝업의 기본 스타일은 다음과 같습니다:

[popover] {
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 0.25em;
overflow: auto;
color: CanvasText;
background-color: Canvas;
}

따라서 기본 스타일을 덮어쓰기 위해 사용할 수 있습니다 :popover-open 부류

实例

弹出状态下的任何元素的样式选择并设置:

:popover-open {
  width: 150px;
  height: 150px;
  position: absolute;
  inset: unset;
  bottom: 25px;
  left: 25px;
  margin: 0;
  color: maroon;
  background-color: orange;
  font-size: 25px;
}

직접 시험해 보세요

CSS 문법

:popover-open {
  css 선언;
}

기술 세부 사항

버전: CSS4

브라우저 지원

표中的数字指定了完全支持该伪类的首个浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
114 114 125 17 100

관련 페이지

참조:HTML 포폴러 속성