Как украсить разные ли

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

Вы можете добавить левую границу ко всем лиям и удалить ее сначала.

#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

Еще одно решение, просто измените этот 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;
}

Answer 4

Вот что вы можете сделать.

Демо

Это лучший метод, который использует свойства 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 5

Привет, вы можете получить результаты через свойство first & last child, например, смотрите ссылку: - http://jsfiddle.net/nFfzy/

Answer 6

, поэтому просто используйте идентификаторы вместо класса, чтобы выбрать каждый элемент списка индивидуально и применить стили, которые вы хотите. вам придется повторить часть кода для каждого 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;
}

и повторите это, пока оставшаяся часть идентификатора не изменится для каждого отдельного элемента.