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>

如您所见，您必须输入数字。也就是说，它们将不再自动生成。但是对于该问题可能有更复杂的解决方案。看到这里：How to colour the list-style-type auto-generated numbers?

[上面的代码也在这里：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 个答案: