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，但它不适用于选择器ul li:not(li>:first-child)。我想要这样的最终结果fiddle，任何想法？

Answer 1

<ul id="first">

第一级li

ul > li
{
    color:red;
}

对于此后的任何其他li ..

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

更新了fiddle here。

Answer 2

我有点困惑，但是在我希望第一个孩子有不同风格的情况下，我实际上给了它的兄弟姐妹所需的替代风格：

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

Answer 3

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

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

CSS：not（li＆gt;：first-child）选择器

3 个答案: