css - 后代选择器或在 html 中重复相同的类

Question

我应该在所有相同的元素上重复上课

<ul class='nav'>
    <li class='sub-nav'>
        ...
    </li>
    <li class='sub-nav'>
        ...
    </li>
    ...
</ul>

或者我应该后代选择器 .nav > li {...}

我在此处阅读了此输入链接描述以避免后代选择器，但我认为重复并不好

我应该怎么办？

（对不起，我是新手。）

Answer 1

好的，我理解您的需要，嗯，而不是重复相同的类来设置您的li使用 descendant选择器和child combinator选择器的样式。检查这个例子

如果您使用后代选择器意味着它将选择无序列表下方任何位置的任何列表项或您在标记结构中使用的任何元素。

ul.nav{
       width:500px;
        overflow:visible;
}
/*this one applies into whole li elements which cames under ul.nav*/
ul.nav li{
    background:#f8f8f8;
    line-height:30px;
    list-style:none;
    margin-bottom:5px;
    position:relative;
}

ul.nav li ul{
    position:absolute;
    top:0px;
    right:0;
    width:100px;
    z-index:5;
}

如果您使用子组合选择器，则意味着它只会选择作为无序列表的直接子项或您在标记结构中使用的任何元素的列表项。这个不会影响其子项的无序列表或任何元素

ul.cselctor{
    margin-top:50px;

}

/*this one applies into direct childs (li) elements only which cames under ul.nav*/
ul.cselctor > li{
       background:#f00;
    line-height:30px;
    list-style:none;
    margin-bottom:5px;
    position:relative;
}
ul.cselctor > li ul{
    position:absolute;
    top:0px;
    right:0;
    width:100px;
    z-index:5;
}

这是针对您的评论问题

.nav如果你单独使用这个类意味着你可以将这个类用于任何东西div's, a's ,span's....等等，ul.nav 意味着它仅用于无序列表..例如..a.nav{}这里这个导航类仅用于锚元素。该类仅用于相应的元素..