[html] HTML 목록에서 글 머리 기호의 색상을 변경 하시겠습니까?

Program / 글쓴이

내가 원하는 것은 목록의 총알 색상을 밝은 회색으로 변경할 수있는 것뿐입니다. 기본값은 검정색이며 변경 방법을 알 수 없습니다.

이미지 만 사용할 수 있다는 것을 알고 있습니다. 내가 도울 수 있다면 차라리 그렇게하지 않겠습니다.

답변

글 머리 기호는 텍스트에서 색상을 가져옵니다. 따라서 목록의 텍스트와 다른 색상의 글 머리표를 사용하려면 일부 마크 업을 추가해야합니다.

목록 텍스트를 범위로 래핑합니다.

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

그런 다음 스타일 규칙을 약간 수정하십시오.

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}

답변

마크 업을 추가하지 않고 대신 li : before를 사용하여 관리했습니다. 이것은 분명히 :before(이전 IE 지원 없음) 의 모든 한계를 가지고 있지만 매우 제한된 테스트 후에 IE8, Firefox 및 Chrome에서 작동하는 것 같습니다. 우리의 컨트롤러 환경에서 작동하며 누군가 이것을 확인할 수 있는지 궁금합니다. 글 머리 기호 스타일은 또한 유니 코드에있는 항목에 의해 제한됩니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>

답변

2008 년에는 불가능했지만 곧 가능해졌습니다.

W3C CSS3 사양 에 따르면 ::marker의사 요소가 있는 목록 항목 이전에 생성 된 숫자, 글리프 또는 기타 기호를 완전히 제어 할 수 있습니다 . 가장 많이 득표 한 답변의 솔루션에 이것을 적용하려면 :

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

JSFiddle 예제

하지만 2016 년 7 월 현재이 솔루션은 W3C Working Draft의 일부일 뿐이며 아직 주요 브라우저에서는 작동하지 않습니다.

이 기능을 원하면 다음을 수행하십시오.

답변

<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

이 방법의 큰 문제는 추가 마크 업입니다. (스팬 태그)

답변

안녕하세요, 아마도이 답변이 늦었지만 이것을 달성하는 올바른 답변입니다.

사실은 LIst 텍스트가 보통 검은 색 (또는 원하는대로)이되도록 내부 태그를 지정해야한다는 것입니다. 그러나 CSS로 모든 태그와 내부 태그를 재정의 할 수 있다는 것도 사실입니다. 따라서이를 수행하는 가장 좋은 방법은 재정의에 SHORTER 태그를 사용하는 것입니다.

이 CSS 정의를 Usign :

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

그리고이 html 코드 :

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

필요한 결과를 얻습니다. 또한 각 디스크의 색상을 다르게 만들 수 있습니다.

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>

답변

그래픽 프로그램에서 총알을 사용하고 다음을 사용하십시오 list-style-image.

ul {
  list-style-image:url('gray-bullet.gif');
}

답변

목록 항목 내의 텍스트를 범위 (또는 다른 요소)로 감싸고 글 머리 기호 색상을 목록 항목에 적용하고 텍스트 색상을 범위에 적용합니다.