CSS—在id中选择类的语法_Css_Css Selectors

CSS—在id中选择类的语法

css

CSS—在id中选择类的语法,css,css-selectors,Css,Css Selectors,通过类名在id中选择标记的选择器语法是什么？例如，为了使内部li变为红色，我需要在下面选择什么 <html> <head> <style type="text/css"> #navigation li { color: green; } #navigation li .navigationLevel2 { color: re

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

这里有两个选择。我更喜欢navigationAlt选项，因为它最终会减少工作量：

导航李{ 颜色：绿色； } 导航li.导航级别2{ 颜色：红色； } 航海学家{ 颜色：绿色； } 航海学家{ 颜色：红色； } 一级项目二级项目一级项目二级项目

这也会起作用，您不需要额外的课程：

#navigation li li {}

如果有第三级LI，则可能需要重置/覆盖它们将从上述选择器继承的某些样式。您可以将第三个级别作为目标，如下所示：

#navigation li li li {}

只需要深入到最后一个李

    #navigation li .navigationLevel2 li

还请注意，您可以使用名为child selector的>选择器选择作为给定id的直接子级的LI：

#navigation>li
{
    color: blue;
}

因此，更深层的嵌套

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

不需要额外的css类。

如果这样做没有将其应用于不需要的li:s，那么这就是方法，因为它的选择器更少，因此速度更快。至少根据谷歌的页面性能建议。只有在显示的示例是所有标记的情况下。众所周知，所需的标记更为复杂。我的答案是根据给出的信息得出的，这对我不起作用。我试图使用container-1.class1-1{Styles}在container-1id中选择.class1-1类，但它不起作用。我检查元素，发现它根本没有指定样式。

#navigation>li
{
    color: blue;
}

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