开发者社区> 问答> 正文

first-child 有时候不起作用

比如下面的代码,不知为什么第一个article的字体不会变色?

html

<h1>logo</h1>
<article>article1</article>
<article>article2</article>
<article>article3</article>
css

article:first-child {
    color: red;
}​

展开
收起
a123456678 2016-03-24 16:55:06 1956 0
1 条回答
写回答
取消 提交回答
  • :first-child 这个伪类,只有当元素是其父元素的第一个子元素时才能匹配。
    即只有当是父元素的第一个子元素时该选择器才生效。
    在不改变HTML代码的情况下可以用相邻同胞选择器达到想要的效果:

    h1 + article {

    color: red;

    }
    或者使用:nth-child达到同样的效果:

    article:nth-child(2){

    color: red;

    }

    2019-07-17 19:13:05
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载