커스텀 카운터 스타일에 대해 알지 못하는 몇 가지 사항

Juan은 최근 규칙에 대한 연감 항목에서 스타일 목록 (특히 목록 마커)에 대해 매우 흥미로운 것들을 공개했습니다. 당신은 이미

pseudo element에 대해 배웠을 것입니다. 아마도 및

커스텀 카운터를 사용해 보았을 가능성이 높습니다. 또는 귀하의 접근 방식은 @counter-style를 지우는 것일 수 있습니다 (이를 위해 조심하십시오!). 목록 항목의 ::marker pseudo element에서 마크를 수동으로 스크롤하는 것일 수 있습니다. counter-reset 하지만 counter-increment를 시도해 보셨습니까? 그것은 많은 작업을 수행하고 목록 및 목록 태그를 사용하는 새로운 방법을 열어줍니다. list-style 하나의 목록 항목 ::before에 대한 마킹 스타일을 설정하십시오 이것을 특정 프로젝트로 설정된 "고정 된"시스템이라고합니다.

는 특정 태그에 문자를 할당합니다 "축적"시스템을 사용하는 경우 목록 항목에 속하는 기호를 정의 할 수 있습니다. @counter-style

일단 시스템이 루프의 끝에 도달하면 패턴의 첫 번째 항목을 기반으로 새로운 시퀀스를 반복하고 시작합니다. 예를 들어, 전형적인 주사위에는 6면이 있으며, 일곱 번째 목록 항목에 총 7 개의 주사위를 굴리기 시작합니다.

목록 태그에 접두사와 접미사를 추가하십시오. 오래 전, Chris는 목록 항목의 의사 요소를 사용하여 목록 표시 끝에 구두점 마크를 삽입하는 방법을 보여주었습니다.

지금 사용하기가 더 쉽습니다

여러 목록 항목의 스타일을 설정합니다 10 개 항목 목록이 있다고 가정하지만 1-3 항목을 스타일링하고 싶다고 가정 해 봅시다. 우리는 이것에 대한 범위를 설정할 수 있습니다 :

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "?";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

우리는 이전에 우리 자신의 주사위 예제를 확장 할 수 있습니다 :

또 다른 방법은

키워드를 첫 번째 값으로 사용하는 것입니다.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

에 대해

에 대해 말하면, 두 번째 값으로 설정할 수 있으며,이 값은 보유한 목록 항목 수에 따라 무제한으로 계산됩니다.

어쩌면 두 범위를 한 번에 스타일링하고 6-9 항목을 포함하고 싶을 수도 있습니다. 왜 당신 이이 일을하고 싶은지 잘 모르겠지만, 나는 당신 (또는 당신의 하마)에게 충분한 이유가 있다고 믿습니다.

목록 마커에 패딩을 추가하십시오 목록 마크의 고르지 않은 정렬을 한 적이 있습니까? 이것은 일반적으로 1 ~ 2 자리에서 발생합니다. 내용을 정렬하기 위해 추가 문자로 마크를 채울 수 있습니다.

::before 이제 마크는 항상 999 개의 항목까지 정렬됩니다.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

요약 나는 이것이 CSS에서 목록 태그를 사용하는 매우 흥미로운 방법이라고 생각합니다.이 문제는 전통적으로 그러한 문제를 다루는 것보다 낫습니다. 그리고 가 2023 년 9 월에 기준 "새로 사용 가능한"기능이되면 브라우저에서 잘 지원됩니다.

@counter-styles

위 내용은 커스텀 카운터 스타일에 대해 알지 못하는 몇 가지 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!