为什么浮动元素不会被后来使用针对特定元素的 class 定义的样式覆盖？

Question

我正在尝试分析 w3schools 中作为示例给出的这段代码。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

这是我正在分析的代码。

这段代码中有 3 处我无法理解。

1 - 为什么 'li.dropdown' 是行内块？将浮动的列表项（因此已经是内联块）制作成内联块的目的到底是什么？我不知道那有什么用。

2 - 为什么当我把“li.dropdown”做成显示块时，它没有变成块？下拉菜单是浮动的，所以当我让它阻塞时，它不应该覆盖浮动，只是将其宽度扩展到 100% 吗？显然它不会覆盖浮动，那为什么呢？如果它不覆盖浮动，那么为什么首先要使其成为内联块？

3 - 为什么要分别定义“li a”和“.dropbtn”？ class .dropbtn 是“li a”的一部分，那么为什么需要使用 class 单独定义它？

Answer 1

1

li.dropdown {
  display: inline-block;
}

没有必要。

2 当一个元素被浮动时，它会自动成为一个块元素，并且会生成一个块格式化上下文来包含该元素，浮动元素除了块元素之外还有其特殊的显示行为。

3 “li a”和“.dropbtn”分别定义？

这是多余的。

结束

这篇文章可以帮助：https://css-tricks.com/almanac/properties/f/float/

Answer 2

1.) inline-block 和 float 在一起没有意义 - 其中一个是多余的，（尽管它们不一样），最好只使用 inline-block 显示。

2.) 具有 display: block 的元素可以 浮动，当它们浮动时，它们不会自动具有 100% 宽度，但要么与定义或与其内容（通常是图像）一样宽。

浮动的特别之处在于它们的 parent 元素的内容可以在周围浮动，或者最好说在一侧（取决于是左还是右） , 加上它的顶部和底部，具体取决于它在 HTML 结构中的位置。典型的情况是文本在 div 或段落内围绕图像浮动。

3.) li a 适用于 li 标签内的所有 a 标签，在您的代码中也适用于 .dropdown-content 内的链接，它们是“grandparents of the li tag. 所以 class 是他们只影响 a which has the class.

为什么浮动元素不会被后来使用针对特定元素的 class 定义的样式覆盖？

Why don't floated elements get overridden by a later defined style using a class targeting that particular element?

css

css-selectors

css-float