CSS class1 > class2 是什么意思？

【问题标题】：CSS class1 > class2 meaning?CSS class1 > class2 是什么意思？
【发布时间】：2012-04-28 10:44:14
【问题描述】：

我在一些代码示例中看到了 class1 > class2 { class definition } 。以上符号是什么意思？

【问题讨论】：

MDN: Child selector.

标签： html css css-selectors

【解决方案1】：

如果class2 是class1 的直接后代（子），则将规则应用于类class2 的元素。

请注意，这在 ie 7 及更低版本中不起作用

一个小演示：

http://jsfiddle.net/jjqzK/

另外请注意应该写成

.class1 > .class2（在类名前加上点 (.)，而不仅仅是名称）

【讨论】：

【解决方案2】：

请查看此演示（请删除/添加（>）然后您可以看到有什么不同）

http://jsfiddle.net/pZtTy/1/

【讨论】：

【解决方案3】：

这里的类 2 是类 1 的直接子代。例如：

<div class="class1">
   <div class="class2">
     .....
   </div>
   <div class="class2">
     .....
   </div>
   <div class="class2">
     .....
   </div>
   .....
</div>

那么如果我们调用：

.class1 > .class2{
    /* something */
}

那么只有 "class1" div 中的第一个 "class2" div 会受到样式的影响。

【讨论】：