with numbers another color

2019-01-17 09:15发布

站内问答 / HTML/CSS
548 11 5 

<ol>
   <li>test</li>
   <li>test</li>
</ol>

will show as:

  1. test
  2. test

I want to have numbers coloured and text black!

I can edit the css, but I do not have access to the HTML.

11条回答
Animai°情兽
2楼-- · 2019-01-17 09:46

Here's a solution that also wraps the text for each list item left-aligned below the first line (and not below the list number):

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;
}
查看更多
0人赞 添加讨论(0) 举报
疯言疯语
3楼-- · 2019-01-17 09:51

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.

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
4楼-- · 2019-01-17 09:55

The CSS spec gives an example of doing just this. Unfortunately, while it works on Firefox 3, it doesn't appear to work on 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>
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
5楼-- · 2019-01-17 10:00

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;}
查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
6楼-- · 2019-01-17 10:01

Not sure if this works but i think it should:

<li style='color: red;'><span style='color:black;'>test</span></li>

edit
If you cannot edit the html then I'm afraid it's not possible. If you could add javascript to the HTML (once in the head) then you could do it like this:

$(document).ready( function() {
 $('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});

You will need the jQuery library for this.
Then in your CSS just set up a red and a black class with color:red/black declarations.

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
7楼-- · 2019-01-17 10:04

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.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)