CSS의 count 함수 자세히 살펴보기

이 글에서는 CSS의 계산 기능인 counter(), counters()를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

【추천 튜토리얼: CSS 동영상 튜토리얼】

counter()

counter는 카운터의 현재 값을 나타내는 문자열을 반환합니다. 이름과 계산 스타일이라는 두 개의 매개변수를 받습니다. counter(name,styleName),name은 대소문자를 구분하며 현재 카운터를 나타내는 이름 식별자 역할을 합니다. styleName 매개변수는 선택사항이며 증가하는 숫자 또는 문자 유형을 나타냅니다. 허용되는 매개변수는 list-style-type에서 지원하는 유형입니다. 일반적으로 사용되는 것은 다음과 같습니다:

• disc(단색 점)
• 원(빈 점)
• square(단색 사각형)
• decimal(아라비아 숫자 12345...)
• lower-roman(로마 숫자 i , ii, iii...)
• upper-roman (로마 숫자 I, II, III, IV...)
• simp-chinese-informal (중국어 숫자 1, 2, 3...90 9.)
• simp-chinese-formal (中文繁体一이삼사오...)
• lower-latin(소문자 abcd...)
• upper-latin(대문자 ABCD....)
• ...

자세한 내용과 호환성은 MDN list-style-type

을 참조하세요. 반대 이익과 관련된 두 가지 속성 값이 있습니다:

• counter-reset
• counter -increment

counter-reset, counter-increment

counter-reset은 CSS 카운터를 재설정하는 데 사용됩니다. 재설정 내용에는 이름과 초기 번호가 포함됩니다. 예:

    <div></div>

      .demo1 {
        counter-reset: counter1 123;
      }
      .demo1:before {
        content: counter(counter1,simp-chinese-formal);
      }

Effect

counter-increment는 카운터의 증가 간격을 나타내는 데 사용됩니다.

    <p>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
    </p>
      .demo2{
        counter-reset: counter2 1;
        /* counter-increment: counter2 -2; */
      }
      section:before {
        content: counter(counter2,decimal);
        counter-increment: counter2 2;
      }

Effect

Compatibility

Bas를 참조하세요.

카운터를 완전히 지원합니다( )

counters()는 중첩 카운터의 연결 문자를 정의하는 데 사용됩니다. counters(counterName, string, styleName)은 3개의 매개변수 counterName, string, styleName을 받습니다. 밤나무

    <p>
      </p><p>
        内容一
        </p><p>
          </p><p>子内容一</p>
          <p>子内容二</p>
          <p>子内容三</p>
        
      
      <p>
        内容二
        </p><p>
          </p><p>
            子内容一
            </p><p>
              </p><p>子子内容一</p>
              <p>子子内容二</p>
            
          
          <p></p>
          <p></p>
          <p></p>
        
      
      <p>
        内容三
      </p>
    

      .father {
        counter-reset: counter3;
        padding-left: 30px;
      }
      .son:before {
        content: counters(counter3, "-")'.';
        counter-increment: counter3;
      }

효과

를 보세요. 목록 요소는 카운터를 사용하여 서로 간의 계산 연결 규칙을 정의하므로 순서가 지정된 목록을 쉽게 시뮬레이션할 수 있습니다.

호환성

호환성은 카운터와 동일합니다

요약

카운터를 ol과 ul에 비유하면 스타일을 더 유연하게 파악하고 스타일을 설정하는 것이 더 자의적일 것입니다. 목록 관련 스타일 최적화를 사용하는 프로젝트의 경우 최적화를 위해 counter() 및 counters() 사용을 고려할 수 있습니다. 호환성도 좋습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS의 count 함수 자세히 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!