为什么<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>代码中的第一个<ul>子代？

Answer 1

它似乎影响了第一个<li>，但事实并非如此，它只是视觉效果。

height: 40px; + line-height: 40px;技术通常用于将文本垂直对齐到中心。如果您更改了值或注释掉其中一个，例如height: 60px，您会清楚地看到该风格与第一个<li> - example无关。

除了CSS inheritance之外：并非所有CSS属性都是​​继承的，例如margin，padding，height，background-color等都不会被继承默认情况下。但是继承了font-size，line-height，text-align等属性。

Answer 2

实际上并非＃34;技术上＆＃34;影响其下方的<li>标记，但实际上第一个<li>和<ul>重叠。这是因为您没有为每个<li>标记定义样式，因此他们被迫从父级.tntext类继承样式。它们继承了宽度和高度，因此第一个<li>与<ul>标签重叠的原因;它们都具有相同的高度/宽度。检查这些图片，看看我的意思

如果您从<ul>标记中删除高度css值，您会看到整个列表变为红色（如下所示：https://jsfiddle.net/ntvcsese/）。如果您想将该类中的每种样式应用到每个<li>标记，则必须在css中将.tntext更改为.tntext li。像这样：https://jsfiddle.net/fhxqLboL/1/

Answer 3

你的css应如下所示，用calss tntext

更改列表中的每个列表项

    .tntext li{
  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;
}

Answer 4

css中的height属性正是这样做的。由于css，ul仅将背景着色为40px。删除css中的那一行也会使所有的li都变红。

Answer 5

它不会影响第一个<ul>，实际上您在第一种情况下定位height并且您已将40px设置为等于<li>等于<ul>所以height在<li>与第一个<li>相等，您看到第一个background-color: red正在获得<li>。 如果您将第一个background-color height设置为不同的内容并将<ul> 40px更改为80px到{{1}之间的某个内容，则可以更清楚}}