时间戳

首页 > 解决方案 > 想要使有序列表上的数字具有不同的颜色和大小

html - 想要使有序列表上的数字具有不同的颜色和大小

问题描述

所以我想知道如何更改有序列表编号的颜色、大小和字体。我知道如何使颜色不同，但我想知道如何使颜色不同。这是我到目前为止的代码

/* 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 编码器。

标签： htmlcsshtml-lists

解决方案

这是你可以做的。

在 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/]

推荐阅读