Question

我知道我可以为这样的无序列表分配一种颜色：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 16px;
}

li:before {
  content: "• ";
  padding-right: 8px;
  color: green;
}

但这改变了所有子弹的颜色。我想为每个子弹分配不同的颜色。我可以以某种方式应用第n个子函数吗？

Answer 1

简单的解决方案是;

li:before {
  content: "• ";
  padding-right: 5px;
  color: green;
}

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

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

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

或者您可以为每个列表项设置不同的背景颜色，

＆＃13;

body {
  background-color: #151515;
}

@font-face {
  font-family: 'Cuprum';
  font-style: normal;
  font-weight: 400;
  src: local('Cuprum'), local('Cuprum-Regular'), url(http://themes.googleusercontent.com/static/fonts/cuprum/v4/sp1_LTSOMWWV0K5VTuZzvQ.woff) format('woff');
}

nav ul {
  position: fixed;
  top: 50%;
  margin-top: -80px;
  width: 120px;
}

nav a {
  display: block;
  font: normal 1.2em/1em 'Cuprum', Candara, "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  text-transform: uppercase;
  color: #FFF;
  padding: 12px 0;
  text-decoration: none
}

nav li:nth-child(1) a {
  background: #2b5fd6;
}

nav li:nth-child(2) a {
  background: red;
}

nav li:nth-child(3) a {
  background: green;
}

nav li:nth-child(4) a {
  background: purple;
}

nav a img {
  vertical-align: middle;
  padding: 0 10px 0 5px;
}

＆＃13;

<nav>
  <ul id="navigation">
    <li>
      <a href="#home"><img src="http://i.imgur.com/BwCBz.png" width="21" height="21" alt="Home" />Home</a>
    </li>
    <li>
      <a href="#about"><img src="http://i.imgur.com/Uzj32.png" width="21" height="21" alt="About" />About</a>
    </li>
    <li>
      <a href="#works"><img src="http://i.imgur.com/KBt72.png" width="19" height="20" alt="Works" />Works</a>
    </li>
    <li>
      <a href="#talk"><img src="http://i.imgur.com/aplDt.png" width="21" height="15" alt="Talk" />Talk</a>
    </li>
  </ul>
</nav>

＆＃13;

或者你可以使用名为 FontAwesome 的东西，用图像/图标取代子弹。如果你想要你的子弹是花哨的话。 LINK

示例：

https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css

示例

＆＃13;
＆＃13;
ul, li { padding: 0; margin: 0; list-style: none; } ul { margin: 2em 0; } li { margin: 1em; margin-left: 3em; } li:before { content: '\f012'; font-family: 'FontAwesome'; float: left; margin-left: -1.5em; color: #0074D9; } .link { font-size: 0.45em; }
＆＃13;
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> <ul> <li>Net 10%</li> <li>Net 20%</li> <li>Net 30%</li> <li>Net 40%</li> <li>Net 50%</li> </ul>
＆＃13;
＆＃13;
＆＃13;

Answer 2

试试这个

CSS

from decimal import Decimal

def is_number(value):
    try:
        value = Decimal(value)
        return True
    except:
        return False

print is_number(None)   // False
print is_number(0)      // True
print is_number(2.3)    // True
print is_number('2.3')  // True (caveat!)

等等根据需要更改号码

Answer 3

是的，可以通过css规则nth-child。使用一些规则，如：

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

演示：https://codepen.io/motou/pen/vZpERy

如果你想随机更改子弹颜色，那么你需要使用javascript来实现它。

Answer 4

试试这个：

li:before {
content: "• ";
padding-right: 8px;
}

ul li:nth-child(n) 
{ 
color:pink;
 }
ul li:nth-child(n+1) 
{ 
color:white;
 }

您可以通过以下代码更改奇数和偶数项目符号：

   ul li:nth-child(odd) 
    { 
    color:pink;
     }
    ul li:nth-child(even) 
    { 
    color:white;
     }

我希望它有所帮助。

Answer 5

只需在您的css中添加：

li:nth-child(2):before{
      color:red;
      }
      li:nth-child(3):before{
      color:yellow;
      }

如何为HTML无序列表中的每个列表项分配不同的颜色？

5 个答案: