css - 如何给html节点内的第一个子节点定义样式
问题描述
文档结构如下
- <article> |- <h1> or <h2> or <p> or ... # 第一个子节点,出现内容不确定 |- <h1> or <h2> or <p> or ... # 第二个子节点,不受第一个影响 |- <h1> or <h2> or <p> or ... # 同上
如上面的代码所示,由于 h1, h2, p 这些具有不同的 margin-top,我想将紧跟着的这些元素的 margin-top 都重置为 0,但同时不影响后面出现的这些 tag,应该用什么方法?
更新:附上使用 first-child 后的效果:http://jsfiddle.net/Ygdfc/1/
问题解答
回答1:如果使用 css3 的话,可以用:
/* 选择第一个子元素 */article h1:first-child{ margin-top:0;}
鉴于某知名浏览器(我也不知道哪个浏览器,呵呵)对 CSS3 不够支持,可以使用大名鼎鼎的 jquery 来解决。
$('article h1:first-child').css('margin-top',0);回答2:
CSS2 也支持第一个子节点的选择符:
article > h1, article > h2, article p { /* CSS here */}
参考:
http://www.w3.org/TR/CSS2/selector.html#child-selectors
相关文章:
1. python - 关于matplotlib的x轴显示的问题2. mysql优化 - mysql慢查询copying to tmp table3. android 文件File删除问题4. javascript - vue生成一维码?求助!!!!!急5. ueditor上传服务器提示后端配置项没有正常加载,求助!!!!!6. css - .clearfix:after中为什么设置display: table7. 请教: 关于 python 反斜杠转义的疑问8. css - transform: translateY(-50%)在360浏览器极速模式下使得文字变模糊了9. angular.js - 怎样在使用ng-repeat属性的标签里面监听单个事件,使其能够单个改变CSS。10. nginx英文文档的WebSocket proxying部分没看太明白,麻烦推荐一点中文文章
