Question

我正在使用有序列表显示结果。现在我想在数字上添加一个圆圈，颜色从绿色变为红色。作为第一个结果的用途是优先级，而其他要遵循的是较少。因此颜色渐变从绿色变为红色。

.listAddress li {
    padding-top: 15px;
    padding-bottom: 15px;
    display: list-item;
    padding: 10px 10px;
    color: #252424;
    font-size: 12px;
     width: auto;
    font-style: normal;
    text-transform: uppercase;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

<ol class="listAddress">
<li>365 W Northwest Hwy, Palatine, IL 60067, USA</li>
<li>365 W Northwest Hwy, Palatine, IL 60067, USA</li>
<li>365 W Northwest Hwy, Palatine, IL 60067, USA</li>
</ol>

Answer 1

看看这是否有帮助。

<强> jsFiddle

h1.val()/textarea.innerHTML do not work

body { background: white; }
.listAddress {
  padding-left: 0;
  position: relative;
}
.listAddress:before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to bottom, green, red);
}
.listAddress li {
  counter-increment: step-counter;
  list-style: none;
  padding-bottom: 20px;
  position: relative;
  padding-left: 25px;
  overflow: hidden;
}
.listAddress li:before {
  content: counter(step-counter);
  margin-right: 5px;
  box-shadow: 0 0 0 100px white;
  color: white;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  text-align: center;
  width: 20px;
  height: 20px;
}

Answer 2

不是一个完整的答案，但你可以使用：nth-child选择器，它受到最新浏览器的支持。

li:nth-child(1) { color: #636393; }
li:nth-child(2) { color: #B5222D; }
li:nth-child(3) { color: #D4953C; }
li:nth-child(4) { color: #609491; }
li:nth-child(5) { color: #87A248; }

或者，对于完整的浏览器支持，您可以执行此操作

li { color: #636393; }
li+li { color: #B5222D; }
li+li+li { color: #D4953C; }
li+li+li+li { color: #609491; }
li+li+li+li+li { color: #87A248; }

但是不能用纯css以编程方式为li元素应用渐变。有关于它的JavaScript示例。

如何创建具有不同圆环颜色的有序列表

2 个答案: