想要使订购清单上的数字具有不同的颜色和大小
[英]Want to make the number on a ordered list a different color and size
问题描述
So I was wondering how I can change the color, size and font of the ordered list numbers. 
所以我想知道如何更改已订购清单编号的颜色，大小和字体。 I am aware of how to make the color different but I am wondering how to make the color different. 我知道如何使颜色不同，但我想知道如何使颜色不同。 Here is the code I have so far 这是我到目前为止的代码
/* Color scheme: #6FC2F0 (Blue) #74E2AE(Green) and #ff00ff (Fuchsia or purple) #FC913A (Orange)*/ /* Fonts: Alegreya Sans, Kalam and Actor */ .topnav { background-color: #6FC2F0; overflow: hidden; font-size: 20px; font: 'Alegreya Sans', sans-serif; } .topnav a { float: left; color: #ffffff; text-decoration: none; padding: 20px; } .topnav a:hover { background-color: #74E2AE; color: #ffffff; } .topnav input[type=text] { float: right; padding: 6px; border: none; margin-top: 10px; margin-right: 16px; font-size: 20px; border-radius: 25px; } .rectitle { font-size: 50px; font: 'Actor', cursive; margin-left: 5px; margin-top: 15px; } .byx { font-size: 20px; float: left; display: block; color: #8C8C8C; margin-left: 5px; } .byx a { color: #FC913A; } .ingred { float: left; font-size: 18px; color: #000000; display: block; margin-left: 5px; margin-top: 20px; font: 'Actor', sans-serif; } .ingredients { font-size: 18px; display: block; margin-left: 5px; margin-top: 20px; } .serv { font-size: 20px; font: 'Alegreya Sans', sans-serif; margin-left: 5px; margin-top: -20px; } .instructions { display: inline-block; font-size: 18px; } .ol li { color: #ff00ff; }
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Actor|Alegreya+Sans|Kalam" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="recipe.css"> </head> <body> <div class="topnav"> <a href="#home">Home</a> <a href="#contact">Contact Us</a> <a href="#about">About Us</a> <a href="#wheel">Wheel</a> <input type="text" placeholder="Search.."> </div> <div class="rectitle"> Easy 3 Step Honey-Sriracha Salmon </div> <div class="byx"> By: Varun J -- Read more <a href="#aboutus">Here</a> </div> <div class="ingredients"> <h1>Ingredients:</h1> </div> <div class="serv"> Serves 1 person </div> <div style="clear:both"></div> <div class="ingred"> <p>Salmon:</p> <p>1 Medium sized Salmon</p> <p>Salt and Pepper (to taste)</p> <p>Sauce:</p> <p>1 tablespoon Sriracha</p> <p>1 tablespoon Honey</p> <p>1/2 tablespoon Lime Juice</p> </div> <div style="clear:both"></div> <div class="instructions"> <h1>Preperation:</h1> </div> <div class="prep"> <ol> <li class="listi"><span style="color: black">test</span></li> </ol> </div> </body> </html>
JSFiddle: https://jsfiddle.net/JSSSSS/y3mcp2t8/1/ JSFiddle： https ：//jsfiddle.net/JSSSSS/y3mcp2t8/1/
Please bear with me as I am not exactly the best HTML/CSS coder. 请忍受，因为我并不是最好的HTML / CSS编码器。
2 个解决方案
解决方案1
0 2018-11-28 23:00:36
This is what you can do. 这就是您可以做的。
In the css file: 在css文件中：
ol li {
list-style: none;
}
.number {
color: red;
}
In html: 在html中：
<ol>
<li><span class="number">1. </span>item</li>
</ol>
As you can see, you'll have to write the numbers. 如您所见，您必须输入数字。 That is, they won't be autogenerated any longer. 也就是说，它们将不再自动生成。 But there may be more complicated solutions to that problem. 但是对于该问题可能有更复杂的解决方案。 See here: How to colour the list-style-type auto-generated numbers? 请参阅此处： 如何为列表样式类型的自动生成的数字着色？
[Code above also here: https://jsfiddle.net/asifmeh/5dmr8zfL/3/] [上面的代码也在这里： https : //jsfiddle.net/asifmeh/5dmr8zfL/3/]
解决方案2
0 已采纳 2018-11-28 23:09:13
Same technique, using nested spans to keep auto numbering, and allow to style numbers and text: 同样的技术，使用嵌套范围来保持自动编号，并允许设置数字和文本的样式：
.preplist { color: blue; font-size: 16px; } .preplist2 { color: red; font-size: 24px; } .listobject { color: green; font-size: 10px; }
<div> <ol> <span class="preplist"><li><span class="listobject">test</span></li></span> <span class="preplist2"><li><span class="listobject">test2</span></li></span> </ol> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.