对个别项目和父母子项应用CSS类

Question

我正在使用HTML和CSS制作一个简单的菜单。它看起来像这样：

.menu {
  display:table;
  height:39px;
  font-size:0.8em;
  color:white;
  width:100%;
  text-align: center;
  font-weight: inherit;
  background-color:rgba(213, 220, 228, 0.1);
}

.menu-item {
  display:table-cell;
  padding:12px;
}

<div class="menu">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

虽然我有一个名为“菜单项”的菜单项，但我在考虑如果我这样做了。

.menu div {
      display:table-cell;
      padding:12px;
}

当我将类“.menu-item”应用于子div时，它们正确地横向间隔显示，但是当我使用“.menu div”方法时，它们相互堆叠。那是为什么？

Answer 1

方法

这两种方法都有效。你可能会混淆一些东西。

请参阅.menu div方法：

.menu {
  display:table;
  height:39px;
  font-size:0.8em;
  width:100%;
  text-align: center;
  font-weight: inherit;
  background-color:rgba(213, 220, 228, 0.1);
}

.menu div {
  display:table-cell;
  padding:12px;
}

<div class="menu">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

请参阅.menu-item方法：

.menu {
  display:table;
  height:39px;
  font-size:0.8em;
  width:100%;
  text-align: center;
  font-weight: inherit;
  background-color:rgba(213, 220, 228, 0.1);
}

.menu-item {
  display:table-cell;
  padding:12px;
}

<div class="menu">
<div class="menu-item">Item 1</div>
<div class="menu-item">Item 2</div>
<div class="menu-item">Item 3</div>
</div>

问题

确保您正在实施相关内容：对于.menu div，它不需要class="menu-item"，而对于.menu-item，它确实需要class="menu-item"作为其菜单项

如果您使用.menu-item css方法但未将class="menu-item"放置到菜单项div中，它将仅重现您描述的方式，因此.menu-item样式赢了“受到影响：

.menu {
  display:table;
  height:39px;
  font-size:0.8em;
  width:100%;
  text-align: center;
  font-weight: inherit;
  background-color:rgba(213, 220, 228, 0.1);
}

.menu-item {
  display:table-cell;
  padding:12px;
}

<div class="menu">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

另一个可能的问题

也许你正确地实现了.menu-item，但还有其他的css覆盖它，可能是由于选择器权重较高。不同的浏览器以不同的方式实现权重，因此您可能会注意到在这种情况下，问题仅针对少数浏览器发生。

竞争风格示例：

.menu div {
  display:block;
  padding:12px;
}

.menu {
  display:table;
  height:39px;
  font-size:0.8em;
  width:100%;
  text-align: center;
  font-weight: inherit;
  background-color:rgba(213, 220, 228, 0.1);
}

.menu-item {
  display:table-cell;
  padding:12px;
}

<div class="menu">
<div class="menu-item">Item 1</div>
<div class="menu-item">Item 2</div>
<div class="menu-item">Item 3</div>
</div>

要解决此类问题，您必须（a。）删除覆盖样式，或者，如果不可能：（b。）对您的受控样式赋予更高的权重，例如，使用{{1选择器而不仅仅是.menu .menu-item：

.menu-item

.menu div {
  display:block;
  padding:12px;
}

.menu {
  display:table;
  height:39px;
  font-size:0.8em;
  width:100%;
  text-align: center;
  font-weight: inherit;
  background-color:rgba(213, 220, 228, 0.1);
}

.menu .menu-item {
  display:table-cell;
  padding:12px;
}

如果这仍然没有帮助，也许你需要增加额外的重量来覆盖竞争风格，例如，使用辅助<div class="menu"> <div class="menu-item">Item 1</div> <div class="menu-item">Item 2</div> <div class="menu-item">Item 3</div> </div>来帮助：

id

function addExtraWeight() {
  $("#extra-weight-removed").attr("id", "extra-weight");
}

function removeExtraWeight() {
  $("#extra-weight").attr("id", "extra-weight-removed");
}

body div.menu.menu.menu div {
  display:block;
  padding:12px;
}

.menu {
  display:table;
  height:39px;
  font-size:0.8em;
  width:100%;
  text-align: center;
  font-weight: inherit;
  background-color:rgba(213, 220, 228, 0.1);
}

.menu .menu-item {
  display:table-cell;
  padding:12px;
}

#extra-weight .menu-item {
  display:table-cell;
  padding:12px;
}