다른 색의 숫자
<ol>
<li>test</li>
<li>test</li>
</ol>
다음과 같이 표시됩니다.
- 테스트
- 테스트
나는 숫자와 텍스트를 검은 색으로하고 싶다!
CSS를 편집 할 수 있지만 HTML에 액세스 할 수 없습니다.
CSS 사양은 단지이 일의 예를 제공합니다. 불행히도 Firefox 3에서는 작동하지만 IE7에서는 작동하지 않는 것 같습니다.
<html>
<head>
<style>
ol { counter-reset: item; }
ol li { display: block; }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
color: red;
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
이것이 작동하는지 확실하지 않지만 다음과 같아야한다고 생각합니다.
<li style='color: red;'><span style='color:black;'>test</span></li>
편집
html을 편집 할 수 없다면 불가능합니다. HTML에 자바 스크립트를 추가 할 수 있다면 (머리에 한 번) 다음과 같이 할 수 있습니다.
$(document).ready( function() {
$('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});
이를 위해서는 jQuery 라이브러리가 필요합니다.
그런 다음 CSS에서 color : red / black 선언으로 빨간색과 검은 색 클래스를 설정하십시오.
다음은 첫 번째 줄 아래 (목록 번호 아래가 아닌) 왼쪽 정렬 된 각 목록 항목의 텍스트를 줄 바꿈하는 솔루션입니다.
HTML
<ol class="GreenNumbers">
<li>Long text that might wrap onto a second line.</li>
<li>Long text that might wrap onto a second line.</li>
<li>Long text that might wrap onto a second line.</li>
</ol>
CSS
.GreenNumbers {
list-style-type: none;
}
.GreenNumbers ol {
margin-left: 2em;
}
.GreenNumbers li {
counter-increment: count-me;
}
.GreenNumbers li::before {
content: counter(count-me) ". ";
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -1.3em;
top: .05em;
color: #008000;
font-weight: bold;
}
This should do what you're looking for:
http://archivist.incutio.com/viewlist/css-discuss/67894
HTML
<ol>
<li>1 some text here</li>
<li>2 some more text that can span longer than one line</li>
</ol>
CSS
ol { list-style: none; padding-left: 2em; text-indent: -1em;}
li:first-letter { float: left;
font-size: ??;
color: white;
background: orange;
line-height: 1.0; }
Except you'll want to change the color and background according to your design.
This next one is overkill, but gives you a great deal of information on how to style lists:
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
-Adam
@kdgregory 's code worked for me, but it affected my bulleted lists. I changed li to ol li to prevent the bullet items from being affected. Like so:
ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counter(item) ". "; counter-increment: item; color: red; }
P.S. I also prefer to use uppercase in CSS for elements like BODY so I can easily distinguish it from classes .body and ids #body.
From an answer to a similar question I found elsewhere:
Just as a side note, CSS3 will allow easy styling of list markers with the ::marker pseudo-element.
But for now it looks like you'd have to add the <span> to your html.
To expand a bit on what others said, as well as additional question clarifications, there is no built-in way of doing this from CSS w/o touching the HTML. If you are looking to keep the HTML as clean and semantic as possible, I would do the styling using javascript, probably with a library like jQuery, to adjust the DOM so that the css can be more effective.
I would caution, however, using color to convey info. I'm not sure what the purpose of the colored numbers is, but using color to display information leaves colorblind users out of the loop and is a big no no for accessibility.
too bad you can't edit the html... how about js?
<script>
var x = document.getElementsByTagName('li');
for (i=0; i<x.length; i++) { x[i].innerHTML ="<span>" + x[i].innerHTML + "</span>" }
// or with jQuery
$('.li').each(function(){this.innerHTML="<span>" + this.innerHTML + "</span>" })
</script>
<style>
li {color: #DDD;}
li span {color: black;}
</style>
if not, maybe a good-enough solution would be
ol {background-color: #DDD;}
li {background-color: white;}
html:
<ol>
<li>1 A long bullet here it is long to show how it behaves on a second line</li>
<li>2 A long bullet here it is long to show how it behaves on a second line</li>
<li>3 A long bullet here it is long to show how it behaves on a second line</li>
<li>4 A long bullet here it is long to show how it behaves on a second line</li>
<li>5 A long bullet here it is long to show how it behaves on a second line</li>
</ol>
css:
ol { list-style: none; padding-left: 10px; text-indent:0px; margin-left:5px;}
ol li {color:#666;}
ol li:first-letter {color:#69A8DE; padding-right:5px; margin-left:-15px;}
It's a bit late for this but I want to share it with the community, took me a long while to do this. I found a solution to change the OL numbers background and color that works on every browser. Requires an extra tag inside the li.
This is easy, as long as you don't want to assign different colours to different list item numbers. No HTML modifications necessary. Might not work in 100% of browsers though..
ol {color:red;}
ol li {color:black;}
ReferenceURL : https://stackoverflow.com/questions/488830/ol-with-numbers-another-color
'development' 카테고리의 다른 글
| emacs의 커밋 세부 사항으로 자식 비난 (0) | 2021.01.10 |
|---|---|
| 할당 된 배열을 보유하는 unique_ptr을 만드는 적절한 방법 (0) | 2021.01.10 |
| 어셈블리 (ASP.NET/C#)에서 웹 응용 프로그램 버전 번호 사용 (0) | 2021.01.09 |
| UIColor 객체에서 RGB (빨강 녹색 파랑)와 알파를 되 찾는 방법은 무엇입니까? (0) | 2021.01.09 |
| 대소 문자를 구분하지 않음 std :: string.find () (0) | 2021.01.09 |