CSS-在ID中选择类的语法

76

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

— 杰里米
source

92

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

— 约翰·希恩
source

11

仅当显示的示例是所有标记时。众所周知，所需的标记更加复杂。我根据给出的信息回答了我。

— 约翰·希恩

它对我不起作用。我正在尝试通过使用＃container-1 .class1-1 {样式}在＃container-1 id中选择.class1-1类，但是它不起作用。我检查了元素，发现它根本没有分配样式。

— 奥马尔

7

这也将起作用，并且您不需要额外的类：

#navigation li li {}

如果您具有LI的第三级，则可能必须重置/覆盖它们将从上述选择器继承的某些样式。您可以像这样定位第三个级别：

#navigation li li li {}

— 安迪·福特
source

2

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

展开摘要

— 杰森
source

1

.navigationLevel2 li { color: #aa0000 }

— 盖伦
source

如果这样做可以解决问题，而不将其应用于不需要的li：s，则这是可行的方法，因为它具有较少的选择器，因此速度更快。至少根据Google的网页效果建议。

— PatrikAkerstrand

0

只需深入到最后一个李。

    #navigation li .navigationLevel2 li

— kkrobbins
source