想要使订购清单上的数字具有不同的颜色和大小

Question

所以我想知道如何更改已订购清单编号的颜色，大小和字体。 我知道如何使颜色不同，但我想知道如何使颜色不同。 这是我到目前为止的代码

 /* 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/

请忍受，因为我并不是最好的HTML / CSS编码器。

Answer 1

这就是您可以做的。

在css文件中：

ol li {
  list-style: none;
}

.number {
   color: red;
}

在html中：

<ol>
  <li><span class="number">1. </span>item</li>
</ol>

如您所见，您必须输入数字。 也就是说，它们将不再自动生成。 但是对于该问题可能有更复杂的解决方案。 请参阅此处：如何为列表样式类型的自动生成的数字着色？

[上面的代码也在这里： https : //jsfiddle.net/asifmeh/5dmr8zfL/3/]

Answer 2

同样的技术，使用嵌套范围来保持自动编号，并允许设置数字和文本的样式：

 .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>

想要使订购清单上的数字具有不同的颜色和大小

问题描述

2 个解决方案

解决方案1
0 2018-11-28 23:00:36

解决方案2
0 已采纳 2018-11-28 23:09:13

想要使订购清单上的数字具有不同的颜色和大小

问题描述

2 个解决方案

解决方案1 0 2018-11-28 23:00:36

解决方案2 0 已采纳 2018-11-28 23:09:13

解决方案1
0 2018-11-28 23:00:36

解决方案2
0 已采纳 2018-11-28 23:09:13