이제 CSS 중첩이 가능합니까?

CSS 네스팅: 이론에서 실습까지

CSS에서는 네스팅 개념이 오랫동안 화두였습니다. 이전 버전의 사양은 중첩을 지원하지 않았지만 CSS 중첩 모듈의 도입으로 게임이 바뀌었습니다.

CSS 클래스를 다음과 같이 중첩할 수 있습니까?

.class1{some stuff}

.class2{class1;some more stuff}

답변:

예, 이제 CSS 덕분에 CSS 중첩이 가능해졌습니다. 중첩 모듈. 구문은 다음과 같습니다.

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &;:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

.foo {
  color: red;
  @nest & .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

중첩된 선택기가 상위 선택기에서 속성을 상속할 수 있으므로 이 구문을 사용하면 CSS 코드를 더욱 간결하고 유지 관리할 수 있습니다. 이는 복잡한 레이아웃을 구성하고 스타일을 지정하는 데 특히 유용합니다.

위 내용은 이제 CSS 중첩이 가능합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!