CSS - 在 id 中选择类的语法答案

【问题标题】：CSS - Syntax to select a class within an idCSS - 在 id 中选择类的语法
【发布时间】：2010-11-11 13:21:42
【问题描述】：

通过类名在 id 中选择标签的选择器语法是什么？例如，我需要在下面选择什么才能使内部的“li”变为红色？

<html>
<head>
    <style type="text/css">
        #navigation li
        {
            color: green;
        }

        #navigation li .navigationLevel2
        {
            color: red;
        }
    </style>
</head>
<body>
    <ul id="navigation">
        <li>Level 1 item
            <ul class="navigationLevel2">
                <li>Level 2 item</li>
            </ul>
        </li>
    </ul>
</body>
</html>

【问题讨论】：

标签： css css-selectors

【解决方案1】：

.navigationLevel2 li { color: #aa0000 }

【讨论】：

如果在不将其应用于不需要的 li:s 的情况下这样做了，那么这就是要走的路，因为它的选择器更少，因此速度更快。至少根据 Google 的页面性能建议。

【解决方案2】：

#navigation .navigationLevel2 li
{
    color: #f00;
}

【讨论】：

仅当显示的示例是所有标记时。如您所知，所需的标记更为复杂。我的回答基于给出的信息。
这对我不起作用。我正在尝试使用 #container-1 .class1-1 { 在 #container-1 id 中选择 .class1-1 类样式 } 但它不起作用。我检查了元素，发现它根本没有分配样式。
它也不适合我

【解决方案3】：

这里有两个选项。我更喜欢 navigationAlt 选项，因为它最终涉及的工作更少：

<html>

<head>
  <style type="text/css">
    #navigation li {
      color: green;
    }
    #navigation li .navigationLevel2 {
      color: red;
    }
    #navigationAlt {
      color: green;
    }
    #navigationAlt ul {
      color: red;
    }
  </style>
</head>

<body>
  <ul id="navigation">
    <li>Level 1 item
      <ul>
        <li class="navigationLevel2">Level 2 item</li>
      </ul>
    </li>
  </ul>
  <ul id="navigationAlt">
    <li>Level 1 item
      <ul>
        <li>Level 2 item</li>
      </ul>
    </li>
  </ul>
</body>

</html>

【讨论】：

【解决方案4】：

这也可以，您不需要额外的课程：

#navigation li li {}

如果您有第三级 LI，您可能需要重置/覆盖它们将从上述选择器继承的一些样式。您可以像这样定位第三级：

#navigation li li li {}

【讨论】：

【解决方案5】：

只需要深入到最后一个 li。

    #navigation li .navigationLevel2 li

【讨论】：

【解决方案6】：

还请注意，您可以使用 > 选择器（称为子选择器）选择给定 id 的直接子代 LI：

#navigation>li
{
    color: blue;
}

因此嵌套更深

#navigation>li>ul>li
{
    color: red;
}

不需要额外的 css 类。

【讨论】：