html无序列表空心正方形颜色,如何为HTML无序列表中的每个列表项分配不同的颜色？...

Hash..

5

简单的解决方案是

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;

}

或者,每个列表项可以有不同的背景颜色,

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;

}

• 

  Home

• 

  About

• 

  Works

• 

  Talk

或者您可以使用名为FontAwesome的东西,它用图像/图标替换子弹.如果你想要你的子弹是花哨的话.链接

样品:

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

例

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;

}

• Net 10%
• Net 20%
• Net 30%
• Net 40%
• Net 50%