마지막으로 목록 총알의 색상을 쉽게 변경할 수 있습니다.

발아 기간 동안 일반적인 조언은 다음과 같습니다.

• 목록 항목

 li {색상 : 빨간색; } / * 총알 * /
li span {색상 : 검은 색; } /* 텍스트 */

끔찍하지는 않지만 크지 않습니다. 스팬 레벨에서 모든 것을 "재설정"하므로 더 많이 복잡해집니다.

상황이 훨씬 쉬워지고 있습니다. 우리가 갈 때이 세상을 걸어 가자.

대안은 기본 목록 스타일을 찢어서 의사 요소로 바꾸는 것이 었습니다.

 ul {
  목록 스타일 : 없음;
}

li :: 이전 {
  콘텐츠: "• ";
  색상 : 빨간색;
}

계산이 필요하면 CSS 카운터로 그렇게 할 수 있습니다.

 ol {
  목록 스타일 : 없음;
  카운터 리셋 : 내 주인공 카운터;
}

ol li {
  카운터 증가 : 내 주인공 카운터;
}

ol li :: 이전 {
  내용 : 카운터 (My-awenesome-Counter) ".";
  색상 : 빨간색;
}

여기에서 빠르게 : 이것은 색상에 도움이되지 않지만 다음과 같은 문자열을 설정하여 총알에 사용할 문자를 지정할 수 있습니다.

 ul {
  목록 스타일 유형 : '✽';
}

이것은 Firefox 39 (2015)와 Chrome 79 (2019 년 12 월 9 일)입니다.

주문 목록의 경우 수많은 언어 별 옵션이 있습니다. 그리고 이러한 언어 스타일은 CSS 카운터에도 작동하며 Hui Jing의 깊은 다이빙에서 더 많이 배울 수 있습니다.

그러나 우리는 바보 같은 총알 (또는 그것이 무엇이든)를 선택하고 스타일을 만들고 싶었습니다. 이제 우리는 바로 그렇게 할 수 있기 시작했습니다.

Firefox 68 (2019 년 7 월) 기준으로 다음과 같이 할 수 있습니다.

 li :: 마커 {
  색상 : 빨간색;
  내용 : "►";
}

… 보시다시피, 가장 깨끗하고 가장 쉬운 방법 인 색상과 총알이 바뀌므로 진행 상황을 보는 것이 좋습니다.

Tejas는 다음을 보여줍니다.

Manuel Matuzović는 요소를 목록 항목 디스플레이 유형으로 설정하면 마커도 사용할 수 있다고 지적합니다.

 H2 {
  디스플레이 : 목록 항목;
}

H2 :: 마커 {
  색상 : 오렌지;
  내용 : ";";
}

Safari 조차도이 글을 쓰는 시점에 지원을 받았으므로 여기에서 Chrome에 의지해야합니다.

이 브라우저 지원 데이터는 Caniuse의 것입니다. 숫자는 브라우저가 해당 버전에서 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일 / 태블릿

위 내용은 마지막으로 목록 총알의 색상을 쉽게 변경할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!