在另一个<li>中设置<li>样式</li> <li>？</li>

Question

我有以下内容：

<ul id='foo'>
  <li class='fooitem'>
    <ul class='grok'>
      <li class='grokitem'></li>
    </ul>
  </li>
</ul>

我想以不同于grokitem元素的方式设置fooitem元素的样式：

#foo li {
  background-color: red;
}

.grok li {
  background-color: green;
}

但是#foo li定义覆盖了.grok li定义，因此所有内容都显示为红色。如何为grok项定义样式？

由于

Answer 1

您需要稍微不同的样式规则（目前第一个具有ID，具有更高的特定级别） 您可以这样解决：

#foo li {
  background-color: red;
}

#foo .grok li {
  background-color: green;
}

You can give it a try here

Answer 2

您可以通过创建更具体的规则来执行此操作：

#foo li {
    background-color: red;
}

#foo .grok li {
    background-color: green;
}

Answer 3

由于li似乎已为其分配了类，因此您可以专门定位它们，如下所示：

ul.grok li.grokitem
{
    /* your styles here */
}

Answer 4

#foo li {
  background-color: red;
}

#foo .grok li {
  background-color: green;
}

Answer 5

您的示例中不需要任何类

#foo li { background-color: red; } // All <li>s in foo

#foo li li { background-color: green; } // All <li>s in <li>s in foo