Question

我试图让UL中的每个子弹都有不同的颜色，如图中http://imgur.com/XCHxKFc

我想可能每个项目使用nth-child，但是我使用before伪元素应用了bullet。根据我的理解，你不能堆叠伪元素。有任何想法吗？

您可以在此处查看我的代码：http://sacredheart.silverfishdevelopment.com

Answer 1

根据您拥有的子弹点数，您将添加更多带有颜色的nth-child标签。对于这个例子，我只使用了RGB。

HTML

<ul>
  <li><span>first</span></li>
  <li><span>second</span></li>
  <li><span>third</span></li>
</ul>

CSS

li {
  float: left;
  margin: 25px;
}
li:nth-child(1) {
  color: red;
}
li:nth-child(2) {
  color: blue;
}
li:nth-child(3) {
  color: green;
}
li span {
  color: black;
}

https://jsfiddle.net/2eptc5vt/

Answer 2

根据我的理解，你不能堆叠伪元素

你可以。

.topMenuLowerSiteMenu li:nth-child(1)::before {
    color: red;
}

.topMenuLowerSiteMenu li:nth-child(2)::before {
    color: green;
}

.topMenuLowerSiteMenu li:nth-child(3)::before {
    color: blue;
}

...等

Answer 3

是。使用以下格式：

li:nth-child(1):before {
  color: red;
}

li {
  list-style-type: none;
  font-size: 30px;
  font-family: sans-serif;
}

li:before {
  content: '•';
}

li:nth-child(1):before {
  color: red;
}

li:nth-child(2):before {
  color: blue;
}

li:nth-child(3):before {
  color: yellow;
}

li:nth-child(4):before {
  color: green;
}

li:nth-child(5):before {
  color: purple;
}

<ul>
  <li>ONE</li>
  <li>TWO</li>
  <li>THREE</li>
  <li>FOUR</li>
  <li>FIVE</li>
</ul>

每个子弹点的颜色不同

3 个答案: