css first-child实例及详解

css中first-child伪类选择器我们貌似都很熟悉,但是,仅仅是熟悉而已,对于first-child的应用,相信很多人并不能正确运用,经常会出现错误。 本文通过实例向大家讲解first-child的正确使用方法。
<body>
    <ul class="fruit">
        <li>Apple</li>
        <li>Orange</li>
        <li>Pear</li>
        <li>Grape</li>
    </ul>
    <div class="content">
        <p>I am learning CSS.</p>
        <p>I want to be a programmer.</p>
    </div>
</body>

如何设置ul的第一个子元素的背景颜色?我想很多人会想当然的这样使用

ul:first-child{backgroud-color:#ccc;}

结果整个ul元素都被选中了!这样是错误的。

 

我们可以看看手册,first-child选择器用于选取属于其父元素的首个子元素的指定选择器”,这里要理解其父元素。针对上述代码,也就是说应该设置成这样:

li:first-child{backgroud-color:#ccc;}

或者

.fruit>:first-child{backgroud-color:#ccc;}
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

上一遍文章我们介绍了边三角提示框,那个时候的提示框是比较规则的三角形,本实例将难度进一步升级,用css3制作不规则的气泡对话框。希望对学习css3的朋友有所帮助。
在css中,制作带边三角的提示框有很多方法,例如,使用图片或者border配合position。今天我要向大家介绍使用::after和::before配合border制作带边三角提示框。希望对大家学习css有多帮助。
CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”。下面就说一下常见的两个伪元素before和after。
网页制作Webjx文章简介:CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。 CSS
网页制作Webjx文章简介:在CSS网页布局中,不可避免的会涉及到CSS伪类的问题。 在CSS网页布局中,不可避免的会涉及到CSS伪类的问题。到底该如何正确的定义CSS伪类呢?虽然webjx中有很多相关的介绍,但复习一下也无妨。大家看下
网页制作Webjx文章简介:CSS 3增加了大量的结构伪类,利用文档结构树来实现表现,从而可以减少页面内class属性和ID属性的定义,使得文档更加简洁。 相关阅读文章:CSS3属性选择符介绍4.7.3 结构伪类(Structural pseudo-cl