селектор первого ребенка во вложенном списке

Question

Не могу найти способ выбрать первый и последний <li> в каждом списке.Список может продолжаться вечно, поэтому выбор, как этот, не является решением:

ul li ul li etc...

У кого-нибудь есть идеи, как это решить?Пример здесь: http://jsfiddle.net/y03La7kw/8/

Answer 1

ul > li:last-child > a{
 color:blue;
}
ul > li:first-child > a{
 color:red;
}

<ul>
  <li><a href="">a</a>
      <ul>
        <li><a href="">a</a>
            <ul>
              <li><a href="">a</a></li>
              <li><a href="">a</a></li>
            </ul>
        </li>
        <li><a href="">a</a></li>
      </ul>
  </li>
  <li><a href="">a</a></li>
</ul>

Ваша проблема здесь - ваши «подпункты».Они внутри li, поэтому все внутри «первого» * ​​1008 * будет красного цвета.Что вам нужно сделать, это добавить <a> или <span> к вашему li контенту.

Answer 2

Вы можете создать список, используя концепцию ниже

ul > li:first-child{
  color: red;
}
ul > li:last-child{
  color: green;
}
ul > li > ul > li:last-child{
 color: pink;
}
ul > li > ul > li:first-child{
 color: yellow;
}
ul > li > ul > li > ul > li:last-child{
 color: orange;
}
ul > li > ul > li > ul > li:first-child{
 color: #999;
}

<ul>
  <li>a
      <ul>
        <li>a
            <ul>
              <li>a</li>
              <li>a</li>
            </ul>
        </li>
        <li>a</li>
      </ul>
  </li>
  <li>a</li>
</ul>

Answer 3

Назначьте цвет по умолчанию, если это еще не сделано, и перезапишите первый дочерний элемент каждого неупорядоченного списка.

ul li {
  color: black;
}

ul>li:first-child {
  color: red;
}

<ul>
  <li>a
    <ul>
      <li>a
        <ul>
          <li>a</li>
          <li>a</li>
          <li>a</li>
        </ul>
      </li>
      <li>a</li>
    </ul>
  </li>
  <li>a</li>
</ul>

Answer 4

Ваш css работает нормально.

Проблема с вашим примером заключается в том, что <ul> внутри <li> принимает цвет шрифта своего родителя.Я добавил кое-что в ваш пример, чтобы вы могли видеть, что он работает http://jsfiddle.net/y03La7kw/8/

Answer 5

Рабочая скрипка здесь

Вам просто нужно использовать псевдо-селекторы first-child и: last-child.И не забудьте предоставить стиль по умолчанию для других li, например,

ul li:last-child,
ul li:first-child {
  color: red;
}

ul li {
  color: black;
}