Question

以下问题适用于以下示例HTML / CSS代码：

＆＃13;

ul {
  display: inline-block;
  list-style: none;
}
li {
  color: #000;
}

＆＃13;

<ul>
  <li>Home</li>
  <li>Portfolio</li>
</ul>

＆＃13;

当选择使用无序列表创建的导航菜单进行格式化和样式化时，使用ul选择器定位列表与直接定位li选择器有什么不同？
是否适当的时候我只应该使用ul选择器而不是li，反之亦然？换句话说，是否存在仅适用于ul级别的属性。在李级？

Answer 1

首先，有些事情你只是做不到选择ul（我的意思是纯CSS解决方案，省略预处理器）：

li { color: blue; }
li:first-child, li:last-child { color: red }

以及:pseudo-classes等等。

选择整个容器和定位嵌套元素的要点只是少得多写作。比较：

<ul>
  <li class="my-superior-class-name"
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
</ul>

使用：

<ul class="my-superior-class-name">
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
</ul>

使用CSS样式定位ul和li的主要区别在于定位更深层次的嵌套元素具有更高的优先级。

无序列表的默认样式为：

ul { 
  list-style-type: disc; 
  list-style-position: inside; 
}

所以这是仅在ul lvl 上工作的一种属性。但是考虑一下情况，当您在padding上设置ul时：每个ul个孩子都会获得相同的填充吗？来inheritance。

总的来说，有一条建议：不要过度复杂化并使用您认为最简单易懂的内容并为您回复。

Answer 2

并非每个属性都是隐式继承的，事实上在OP的代码中有证明。属性display:inline-block已应用于<ul>，但<li>不会继承display:inline-block <ul>，除非它通过display:inherit明确使用<li> display: inline-block（也可能在<li>上使用<ul>，因为两个选项都需要同样的努力来编写。）

在某些情况下，我们应该将<li>定位在font-size之上，例如隐式继承的属性：color，visibility，{{ 1}}等。

段

ul {
  display: inline-block;
  list-style: none;
}
li {
  color: #000;
}
ul:last-of-type {
  display: block;
}
ul:last-of-type li {
  display: inline-block;
}

<h5><mark><code>ul { display:inline-block; }</code></mark></h5>
<ul>
  <li>Home</li>
  <li>Portfolio</li>
</ul>
<h5><mark><code>li { display:inline-block; }</code></mark></h5>
<ul>
  <li>Home</li>
  <li>Portfolio</li>
</ul>

由无序列表

2 个答案:

段