如何设计不同的李

Question

我想为不同的li添加不同的样式，结果应该是这样的

test one  | test two | test three

#nav ul,
li {
  list-style-type: none;
}

#nav ul li {
  float: left;
  height: 45px;
  padding: 8px;
  width: 100px;
}

#nav ul li .border {
  border-left: 1px solid #ccc;
}

#nav ul li a {
  color: red;
  font-size: 15px;
}

#nav ul li a:hover {
  color: blue;
}

<div id="nav">

  <ul>
    <li>test one</li>
    <li class="border">test two</li>
    <li class="border">test three</li>
  </ul>

</div>

Answer 1

像这样写：

li + li{
 border-left:1px solid #ccc;
}

检查这个http://jsfiddle.net/fpQ8y/

#nav ul,
li {
  list-style-type: none;
}

#nav ul li {
  float: left;
  height: 45px;
  padding: 8px;
  width: 100px;
}

#nav ul li+li {
  border-left: 1px solid red;
}

#nav ul li a {
  color: red;
  font-size: 15px;
}

#nav ul li a:hover {
  color: blue;
}

<div id="nav">

  <ul>
    <li>test one</li>
    <li class="border">test two</li>
    <li class="border">test three</li>
  </ul>

</div>

Answer 2

您可以为所有li添加左边框并从第一个删除它。

#nav ul li {
float:left;
height:45px;
padding:8px;
width:100px;
border-left:1px solid #cb2326;
}

#nav ul li:first-child {border:none;}

检查这个小提琴：http://jsfiddle.net/Squeg/

Answer 3

所以只需使用id而不是类来单独选择每个列表项并应用所需的样式。你必须为每个li重复一些代码。

   <li id="li1">test one</li>
   <li id="li2">test two</li>
   <li id="li3">test three</li>

CSS

ul {
    list-style-type: none;
}
#li1 {
    border-left:1px solid #ccc;
    float:left;
    height:45px;
    padding:8px;
    width:100px;
}
#li1 a {
    color:red;
    font-size:15px;
}
#li1 a:hover {
    color:blue;
}

并重复其余的id改变你想要的每个项目。

Answer 4

嗨，您可以通过第一个和最后一个子属性获得结果，例如，请参阅链接： - http://jsfiddle.net/nFfzy/

Answer 5

这是你可以做的。

The Demo

这是使用CSS3 :first-of-type和:nth-of-type属性的更好方法。

nav ul {
  list-style-type: none;
}

nav ul li {
  float: left;
  height: 45px;
  padding: 8px;
  width: 100px;
}

nav ul li:first-of-type {
  border-right: 2px solid #ff4500;
}

nav ul li:nth-of-type(2n) {
  border-right: 2px solid #ff0450;
}

nav ul li a {
  color: #222;
  text-decoration: none;
  text-transform: uppercase;
}

nav ul li a:hover {
  color: #ff0450;
}

<nav>
  <ul>
    <li><a href=#>test one</a></li>
    <li><a href=#>test two</a></li>
    <li><a href=#>test three</a></li>
  </ul>
</nav>

Answer 6

还有一个解决方案，只需更改此CSS：

#nav ul li .border {
  border-left: 1px solid #ccc;
}

这样：

#nav ul li:nth-child(2) {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}