Question

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

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

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

我读了这个enter link description here以避免后代选择器，但我觉得重复它不好

我该怎么办？

（对不起，我是新手。）

Answer 1

好吧，我理解你需要嗯而不是重复同一个类来设置li使用descendant选择器和child combinator选择器的样式。 check this example

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

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{}此处此nav类仅用于锚元素。该类仅用于各个元素..

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

1 个答案: