Question

这就是我所拥有的：
我有一个div id="navbar"以及那里的ul和li元素的各种样式。

现在我想知道，如果CSS中有任何选择器我可以说＆＃34;以下css样式只能被＃navbar＆＃34;

的孩子使用

类似的东西：

/* ***** 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，那就不会有问题了。

sincerly basti

Answer 1

您正在寻找descendant combinator：空间。例如：

#navbar li {
    /* styles */
}

这只会将样式应用于li后代的#navbar元素。

你必须在每条规则上使用它。如果您希望语法更像您在问题中的语法，那么有些预处理器可以执行此类操作：Sass，Less等。

但只有CSS本身，你需要在每条规则上重复#navbar。

Answer 2

直接儿童

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

<强>后代

#parent #descendant {
    color: #fff;
}

不同的CSS风格只适用于某个div的孩子

2 个答案: