css - CSS :not(li>:first-child) 选择器

Question

我有一个元素列表：

<ul>
  <li>Coca Cola</li>
  <li>Tea</li>
  <li>Coffee
    <ul>
      <li>White Coffee</li>
      <li>Black Coffee</li>
      <li>Coffee Low Caffein</li>
    </ul>
  </li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

我想要这样的风格：

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

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

这是我的jsfiddle，但它不适用于 selector ul li:not(li>:first-child)。我想要一个像这个小提琴这样的最终结果，有什么想法吗？

Answer 1

<ul id="first">

对于第一级li

ul > li
{
    color:red;
}

之后的任何其他li..

ul#first > li li
{
    color:blue;
}

在这里更新了小提琴。

Answer 2

ul li:not(:first-child)
{
    color:red;
}

ul li:first-child
{
    color:blue;
}

Answer 3

我有点困惑，但如果我想让第一个孩子有不同的风格，我实际上给它的兄弟姐妹提供了所需的替代风格：

li {
  color:#00f;
}
li + li {
  color:#f00;
}