it-swarm-ko.tech

목록에서 글 머리 기호의 색상을 쉽게 변경하는 방법이 있습니까?

내가 원하는 것은 목록에서 글 머리 기호의 색상을 밝은 회색으로 변경하는 것입니다. 기본적으로 검은 색이며 변경 방법을 알 수 없습니다.

이미지 만 사용할 수 있다는 것을 알고 있습니다. 내가 도울 수 있다면 오히려 그렇게하지 않을 것입니다.

83
Dave Haynes

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

목록 텍스트를 범위로 감싸십시오.

<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 */
}
157
Prestaul

마크 업을 추가하지 않고 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>
44
Marc

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의 일부일 뿐이며 주요 브라우저에서는 아직 작동하지 않습니다.

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

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

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

5
Jonathan Arkell

그래픽 프로그램에서 글 머리 기호를 사용하고 list-style-image :

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

어쩌면이 답변은 늦었지만 이것을 달성하는 올바른 답변입니다.

사실 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>
2
Dragnovich

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

0
user4903

예를 들어 각 요소의 색상을 설정하면 잘 작동합니다. 지금 왼쪽에 여백을 추가했습니다.

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}
0
Mohammed

W3C 사양 에 따라

목록 속성 ... 작성자가 목록 마커에 대해 고유 한 스타일 (색상, 글꼴, 정렬 등)을 지정할 수 없습니다 ...

그러나 위 목록에 범위가있는 아이디어는 잘 작동합니다!

0
Aeon

페이지가 많고 마크 업을 직접 편집 할 필요가없는 경우 Jquery를 사용할 수 있습니다.

다음은 간단한 예입니다.

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

2008 년 질문의 경우 목록에서 글 머리 기호의 색상을 변경하는 방법에 대한 최신 답변을 추가 할 수 있다고 생각했습니다.

외부 라이브러리를 사용하려는 경우 Font Awesome은 확장 가능한 벡터 아이콘을 제공합니다Bootstrap의 도우미 클래스 (예 : text-success), 당신은 꽤 멋진 사용자 정의 목록을 만들 수 있습니다.

아래의 Font Awesome list examples page 에서 추출을 확장했습니다.

fa-ulfa-li 순서없는 목록에서 기본 글 머리 기호를 쉽게 바꿀 수 있습니다.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Font Awesome (주로) IE8 를 지원하고 이전 버전 3.2.1 을 사용하는 경우 IE7 만 지원합니다.

0
eggy