Html 在CSS中更改的颜色

我问这个问题是因为我目前正在努力理解和之间的区别。到目前为止，我所阅读、实践和理解的是，无序列表似乎就像一个家长，我们可以在其中放置项目

所以如果是这样的话，那么如果定义了的颜色，那么它的所有子项也应该有相同的颜色

但不幸的是，情况并非如此。请看下面你自己。只有当我定义颜色的背景色时，颜色才会最终改变。 然而，非常令人惊讶的是，我能够定义红色的文本颜色。 但我不确定为什么背景色黑色不是通过定义“穿透”来实现的

我知道，另一种选择很简单：只需在元素中定义黑色背景色。然而，我正试图理解这背后的原因，这将有助于我更好地理解和理解的定义

保险商实验室{ 背景色：rgba0,0,0,1； 颜色：rgba255,0,0,1； } ulli{ 显示：内联块； 浮动：左； 边框：1px000； 列表样式类型：无； } 第一 这是因为ul高度没有正确采取由于明确的修复造成的儿童李标签浮动，你可以修复这个明确的修复黑客

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

ul {
  background-color: rgba(0,0,0,1);
  color: rgba(255,0,0,1);
}

ul li {
  display: inline-block;
  float: left;
  border: 1px solid #000;
  list-style-type: none;
}

只需将.cf类添加到UL标记

您正在列表项上使用浮动，但尚未在父项上设置布局。 阅读hasLayout css。使用flaot的内联块是多余的。只使用一个。溢出隐藏集父级的布局。使用float时，始终设置父级的布局

保险商实验室{ 背景色：rgba0,0,0,1； 颜色：rgba255,0,0,1； 溢出：隐藏； } ulli{ 浮动：左； 边框：1px000； 列表样式类型：无； } 第一

---

因为您使用的是float，这就是原因

使用Ul中隐藏的溢出，如下所示：

 overflow: hidden;

这是小提琴

https://jsfiddle.net/zt3auduv/1/

---

将clearfix类放在ul上。它可以正常工作。：

.clearfix {
        zoom: 1;
    }
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
        line-height: 0;
    }
    .clearfix:after {
        clear: both;
    }

.clearfix {
        zoom: 1;
    }
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
        line-height: 0;
    }
    .clearfix:after {
        clear: both;
    }