Question

是否有一种简单的方法来定位所有第三层元素？

例如，我的右列布局如下：

<div class=right_column>
 <div class=module>
  <div>
   <p></p>
  </div>
 </div>

 <div class=different_module>
  <div>
   <p></p>
  </div>
 </div>
</div>

如何在此实例中同时定位两个未归类的<div>元素而不单独指定每个元素？

Answer 1

你应该可以做这样的事情

div > div > div{
    /*  styles here */
}

>是一个儿童选择器。

此处说明选择并使用div的{{1}}的孩子，div是div的孩子。

以下是一个示例：http://jsfiddle.net/hbXsE/1/

注意：您提供的HTML包含一些遗失的div标记和一些关闭span标记。我为这个例子重新编写了它。

Answer 2

像这样：.right_column > div > div

>是“儿童选择器” - 查看this关于CSS技巧的一流文章。

Answer 3

您可以使用选择器div.right_column div div，但它也会匹配更深层次嵌套的div。要在大多数较新的浏览器中避免这种情况，您可以使用子选择器，如下所示：div.right_column > div > div但它不适用于旧版本的IE

定位元素的同级子元素

3 个答案: