父<div>类将选项应用到链中太远（nav＆gt; ui＆gt; li影响nav＆gt; ui＆gt; li＆gt; ui＆gt; li）

Question

我会提前道歉，因为我对HTML和CSS的经验非常有限。

我有一个导航类似乎将选项传递到链中太远。我真的不明白为什么会发生这种情况，而且找不到理由我也没有太多运气。我想知道是否有人可以解释为什么会这样，并可能提供一个解决方案来防止它发生。

我已经发布了一个JSFiddle以及我正在谈论的内容的一个例子。

nav > ul > li {
    display:inline-block;
    line-height:32px; <-- THIS LINE..
    }

nav > ul > li > ul > li { <-- IS SOME HOW AFFECTING THIS CHILD CLASS
    display:block;
    }

当发生这种情况时，它会在导航菜单的第一级和第二级应用32px的行高，但我无法弄清楚原因。我已经考虑过将reset.css中的行高调零，但我不确定这是否是正确的答案。

https://jsfiddle.net/tua083fr/2/

谢谢，对不起，如果这是一个愚蠢的问题。

Answer 1

您是否有任何理由无法在级联中进一步定义或重新定义所需的行高？

    nav > ul > li > ul > li {
        display:block;
        line-height: 10px; /* HERE ! */
        }

https://jsfiddle.net/tua083fr/3/

或者，也可以将line-height应用于<a>孩子，而不是<li>（因为<li>样式应用于其所有子项，包括下拉{{1和它自己的<ul>个孩子）？

<li>

https://jsfiddle.net/tua083fr/5/

Answer 2

li是自然的块级元素，因此不需要显示：块。行高的继承与遍历dom和执行顺序有关。