CSS第一个孩子

时间:2011-07-11 04:25:02

标签: css css-selectors

“使用h1,h2,h3,h4,h5和h6中的任何一个的第一子元素后代元素设置任何带内容id标记的元素,如下所示:”

我创建的选择器位于以下位置:

#content:first-child h1,
#content:first-child h2, 
#content:first-child h3, 
#content:first-child h4, 
#content:first-child h5, 
#content:first-child h6 {}

这是对的吗?如果是这样可以进一步简化?

感谢大家的帮助!

2 个答案:

答案 0 :(得分:7)

描述有点但不清楚,但是,据我所知,你想要

  • 选择那些h *元素,然后样式就像:

    #content h1:first-child,
    #content h2:first-child, 
    #content h3:first-child, 
    #content h4:first-child, 
    #content h5:first-child, 
    #content h6:first-child {}
    

Example

  • 选择#container元素本身,以防它的第一个子元素是h * family之一。然后你无法用纯CSS实现这个,需要添加一个简单的JS(在这种情况下使用jQuery):

    $('#content').has('h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child');
    

Example

答案 1 :(得分:1)

您可以将class="header"添加到所有h *标记中。所以你的CSS现在将是

#content:first-child .header { /* whatever */ }

这里的问题是你需要记住将class="header"放到你需要的每个标签上