CSS 카운터가 올바른 괄호를 사용하도록 HTML의 낮은 알파 순서 목록을 사용자 정의할 수 있습니까?

낮은 알파 순서 목록에서 오른쪽 괄호 사용(HTML)

많은 웹사이트에서는 구조적이고 순차적인 방식으로 콘텐츠를 표시하기 위해 순서 목록을 사용합니다. . 기본적으로 이러한 목록은 점(".")을 사용하여 각 목록 항목을 나타냅니다. 그러나 오른쪽 괄호("a)", "b)" 등과 같은 다른 표시를 선호하는 경우가 있을 수 있습니다.

질문: 가능합니까? 대신 오른쪽 괄호를 사용하도록 HTML의 하위 알파 목록 스타일을 사용자 정의합니다. 도트?

답변:

놀랍게도 CSS 카운터를 사용하여 이 효과를 얻을 수 있는 영리한 방법이 있습니다. 카운터를 사용하면 제목이나 목록 항목과 같은 요소에 자동 번호 매기기를 설정할 수 있습니다. 이 기능을 조정하면 괄호를 사용하여 사용자 정의 목록 스타일을 생성할 수 있습니다.

다음은 수행 방법을 보여주는 코드 조각입니다.

<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

ol {
  counter-reset: list;
}

ol > li {
  list-style: none;
}

ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

1. 재설정 카운터: counter-reset 속성은 주문된 항목에 대해 "list"라는 카운터를 초기화합니다. 목록.
2. 기본 스타일 제거: 목록 항목에 목록 스타일: 없음을 설정하여 기본 점 마커를 제거합니다.
3. 사용자 정의 마커 만들기: li:before 의사 요소 내에서 콘텐츠 속성을 사용하여 사용자 정의 마커를 생성합니다. 여기서 counter(list, lower-alpha)는 소문자 알파벳 문자(a, b, c 등)를 제공하고 ")"를 사용하여 오른쪽 괄호를 추가합니다.
4. Counter를 증가시킵니다. 카운터 증가: 목록은 각 목록에 대해 "목록" 카운터를 1씩 증가시킵니다. item.

참고: 목록 항목 내에서 괄호를 올바르게 정렬하려면 CSS의 패딩과 간격을 조정해야 할 수도 있습니다.

위 내용은 CSS 카운터가 올바른 괄호를 사용하도록 HTML의 낮은 알파 순서 목록을 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!