Javascript 仅针对某个div的子级使用不同的css样式

这就是我所拥有的：
我有一个div

id=“navbar”

和各种样式的

ul

和

li

元素

现在我想知道，CSS中是否有任何选择器，我可以说“以下CSS样式只适用于#navbar的子项”

比如：

/* ***** NAVBAR ****** */
#navbar {
    /* Add a gray right border to all list items, except the last item (last-child) */
    li {
        border-right: 1px solid #bbb;
    }

    li:last-child {
        border-right: none;
    }

    .active {
        background-color: #4CAF50;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    /* Change the link color to #111 (black) on hover */
    li a:hover {
        background-color: #111;
    }
}

有没有办法将各种css样式仅应用于某个HTML元素的chil、child-child或child-…-child元素

注意，我也在使用jQuery，所以如果只有jQuery才有可能做到这一点，那就不会有问题

诚然，巴斯蒂

您正在寻找的是：一个空间。例如：

#navbar li {
    /* styles */
}

这将仅将样式应用于

li

元素，这些元素是

#navbar

的后代

你必须在每一条规则上使用它。如果您希望语法更像您在问题中所使用的语法，那么有一些预处理器可以做类似的事情：，等等

---

但是，仅使用CSS本身，您就需要在每个规则上重复

#导航栏

。

直接子项

#parent > #child {
    color: #fff;
}

后代

#parent #descendant {
    color: #fff;
}

---

#示例>*{}

将仅选择直接子项如果您指的是所有子项（在所有级别中）或仅下一级别的子项，则答案将不同@Martijn给出了我认为最好的答案。@Lee:“…仅适用于chil或child-child或child-…-某个HTML元素的子元素？”显然OP指的是后代，不是直接的孩子。@T.J.Crowder fair enough我猜一个关于CSS选择器的非常小的搜索，您将得到answer@T.J.Crowder后代（在第一类中）也是元素的子元素，不是吗？；）