没有 id 的 CSS 样式特定 div答案

【问题标题】：CSS style specific div without id没有 id 的 CSS 样式特定 div
【发布时间】：2011-03-08 18:37:00
【问题描述】：

我正在制作一个 ebay 店面，需要在页面上设置我无法编辑其 html 的元素的样式。

html 是这样的

<td id="blah">
  <div>
    <div>....

    </div>
  </div>
  <div>....

  </div>
</td>

我需要为两个 div 添加一个边距

..但不是那些 div 的子 div

我尝试的 css 是 #blah div {margin:5px;}，但这当然会影响子 div。

【问题讨论】：

【解决方案1】：

有> "immediate child" 选择器：

#blah > div {margin:5px;}

但它是not supported by IE6，遗憾的是，这仍然是许多观众的考虑因素。

最好在要设置样式的框中添加一个类：

<td id="blah">
  <div class="box">
    <div>....

并指定：

#blah div.box {margin:5px;}

【讨论】：

正要发布，在 Chrome 中进行了演示，但它不起作用？
直接子选择器，而不是新类（OP 无法添加类）见此处：jsfiddle.net/Mutant_Tractor/39LnU/1
@Myles 这是因为您在表上下文之外使用了<td>。当您将其更改为 div 时它会起作用：jsfiddle.net/39LnU/3 但是，字体大小是继承给子级的属性之一，因此文本不准确:)
啊哈很聪明，我不知道 CSS 不允许这样的事情:)

【解决方案2】：

您可以使用现有的，只需添加另一个选择器来覆盖子项：

#blah div 
{
    margin:5px;
}

#blah div div
{
    margin: 0;
}

试一试:)

【讨论】：

【解决方案3】：

您需要子选择器，而不是后代选择器：

#blah > div

【讨论】：