Question

我有一个css子级问题。通常人们似乎为特定的类定义了一种风格。这就是我开始使用的：

.divholder {
  width:750px;
  border:none
  font-size:12;
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  }

 .five {
  width:100px;
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  float:left;
  }

这样可以在较大的一个区域内进行五个细分。它目前拥有五个选项的在线表格按钮，因此五个。现在我试图在我的css文件中指定除法，这样我就不必经常定义div class =＆＃34; ...＆＃34;在HTML部分。这看起来如下：

form.cmxform div {
  width:750px;
  border:none;
  font-size:12;
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  }

form.cmxform div div {
  width:100px;
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  float:left;
         }

规范只是从类中复制而来，在chrome和IE中运行良好。奇怪的是，当我应用上述子规范时，它适用于IE，但不适用于Chrome。 Chrome会将每个部门与较低的代码放在一个单独的行上，但不会使用顶部代码。有没有人知道为什么会这样，我怎么能解决它？感谢您的任何建议或评论！

*编辑适用的html代码如下：

<li><label>&nbsp;</label><div><div class="five">Zeker Niet</div><div class="five">&nbsp;</div><div class="five">&nbsp;</div><div class="five">&nbsp;</div><div class="five">Zeker Wel</div></div></li>
     <li><label>&nbsp;</label><div><div>--</div><div>-</div><div>0</div><div>+</div><div>++</div></div></li>

div类特定的顶线在chrome和IE9中运行良好，但它下面的行仅适用于IE9，而不是chrome

Answer 1

[已更新]

根据您的语法，form.cmxform div的css会影响更嵌套的divs。

要访问层次结构中特定级别的子元素，请使用form.cmxform > div和form.cmxform > div > div，>访问直接后代。

在您的示例中，您需要写：

form.cmxform li > div {
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 750px;
}

form.cmxform li > div > div {
  text-align:center;      /* added for style */
  width:100px;
  float:left;
}

css部门内部的css造型

1 个答案: