Question

通过类名选择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>

Answer 1

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

Answer 2

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

#navigation li li {}

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

#navigation li li li {}

Answer 3

.navigationLevel2 li { color: #aa0000 }

Answer 4

这是两个选项。我更喜欢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>

Answer 5

只需深入到最后一个li。

    #navigation li .navigationLevel2 li

Answer 6

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

#navigation>li
{
    color: blue;
}

因此嵌套更深

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

不需要额外的 css 类。

CSS - 在id中选择类的语法

6 个答案: