html - 为什么 <ul> 中的样式只影响第一个 <li>？

Question

我有一个 unordered list在我的代码中看起来有点像这样

.tntext {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  width: 150px;
  background-color: red;
}

<ul class="tntext">
  <li>hi</li>
  <li>hi</li>
  <li>hi</li>
  <li>hi</li>
</ul>

这会生成一个如下图所示的列表。你可以在这个 JSFiddle 查看代码

然而，当 html 更改为如下所示时

.tntext {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  width: 150px;
  background-color: red;
}

<ul>
  <li class="tntext">hi</li>
  <li class="tntext">hi</li>
  <li class="tntext">hi</li>
  <li class="tntext">hi</li>
</ul>

这会生成一个如下图所示的列表。你可以在这个 JSFiddle 查看代码

为什么在 <ul> 中声明类标签只影响第一个 <li>里面的 child <ul>标签？

Answer 1

它实际上并没有“技术上”影响 <li>它下面的标签，但实际上是第一个 <li>和 <ul>是重叠的。这是因为您没有为每个 <li> 定义样式标签，因此它们被迫从其父项 .tntext 继承样式类(class)。它们继承了宽度和高度，因此为什么第一个 <li>与 <ul> 重叠标签;他们都有相同的高度/宽度。查看这些图片了解我的意思

如果从 <ul> 中删除高度 css 值标签，你会看到整个列表变成红色(像这样:https://jsfiddle.net/ntvcsese/)。如果您想将该类中的每种样式应用于每个 <li>标记，您必须更改 .tntext至 .tntext li在你的CSS中。像这样:https://jsfiddle.net/fhxqLboL/1/