nth-child를 사용하지 않고 특정 CSS 그리드 셀의 스타일을 선택적으로 지정하는 방법은 무엇입니까?

CSS에서 특정 그리드 셀을 대상으로 지정하는 방법

그리드 하위 요소 없이 행과 열 선택

CSS 그리드 레이아웃에서 n번째 하위 선택자는 다음 작업을 수행합니다. 내용이 셀 내에 동적으로 배치될 수 있으므로 특정 셀을 선택하는 것만으로는 충분하지 않습니다. 그러나 원하는 동작을 얻기 위해 display:contents와 함께 래퍼 요소를 사용할 수 있습니다.

다음 시나리오를 고려하십시오.

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  background: #999;
}

두 번째 열 내의 모든 요소를 ​​선택하려면 해당 요소를 디스플레이가 포함된 래퍼: 내용. 이를 통해 두 번째 열의 셀 스타일을 전체적으로 지정할 수 있습니다.

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-container {
  display: contents;
  grid-column: 2;
}

.grid-item {
  background: #999;
}

이 접근 방식을 사용하면 래핑된 요소가 그리드 컨테이너의 직계 하위 요소인 것처럼 동작하여 그에 따라 스타일을 적용할 수 있습니다.

위 내용은 nth-child를 사용하지 않고 특정 CSS 그리드 셀의 스타일을 선택적으로 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!