谁是谁的first-child

看过CSS伪类选择器之后，心想也就如此嘛，:first-child选择元素的第一个子元素，有什么难的，可一到实践中，还是到处碰壁啊。

 1 <body>
 2     <ul class="fruit">
 3         <li>Apple</li>
 4         <li>Orange</li>
 5         <li>Pear</li>
 6         <li>Grape</li>
 7     </ul>
 8     <div class="content">
 9         <p>I am learning CSS.</p>
10         <p>I want to be a programmer.</p>
11     </div>
12 </body>

设置ul的第一个子元素的背景颜色，我想当然地使用了 ul:first-child{backgroud-color:#ccc;}，结果发现整个ul元素都被选中了！

再回头看手册“:first-child选择器用于选取属于其父元素的首个子元素的指定选择器”，针对上述代码，也就是说应该设置成这样：

li:first-child{backgroud-color:#ccc;}或者.fruit>:first-child{backgroud-color:#ccc;}

同理，若想选择<div>的第一个<p>元素，应该设置：

p:first-child{backgroud-color:#789;}或者.content>:first-child{backgroud-color:#789;}

转载于:https://www.cnblogs.com/gexinpeng/p/4826186.html

谁是谁的first-child相关推荐

二十一世纪大学英语读写教程（第四册）学习笔记（原文）——1 - Who Is Great?（谁是伟人？）
Unit 1 - Who Is Great?(谁是伟人?) Who Is Great? Michael Ryan As a young boy, Albert Einstein did so poor ...
oracle 提示:ORA-02292:integrity constraint(xxxxxxx) violated - child record found
当我们删除数据的时候 oracle 提示:ORA-02292:integrity constraint(xxxxxxx) violated - child record found 这种情况呢是因为 ...
谁是“艾灵”？是腾讯的真国风 AI 虚拟人！
近日,腾讯AI虚拟人艾灵再秀出新技能,首次展示AI作诗.AI书法等国风才艺,并与青年歌手白举纲跨次元合作,共同演唱国风新歌<百川千仞>. AI"艾灵"诞生于腾讯AI L ...
《权力的游戏》最终季上线！谁是你最喜爱的演员？这里有一份Python教程 | 附源码...
译者 | 刘畅编辑 | 琥珀出品 | AI科技大本营(id:rgznai100) <权力的游戏>最终季已于近日开播,对于全世界翘首以待的粉丝们来说,其最大的魅力就在于"无法预 ...
数据分析奥斯卡女神们，谁是你心中的No.1？
作者 | 徐麟转载自数据森麟(公众号 ID:shujusenlin) 前言在开始今天的正文前,首先带来一首经典的由奥黛丽·赫本演唱的<Moon River>,也是电影<蒂凡尼的早 ...
CF438E The Child and Binary Tree（有意思的生成函数 + 多项式求逆 + 多项式开方）
整理的算法模板合集: ACM模板点我看多项式全家桶(●^◡_◡◡^●) CF438E The Child and Binary Tree 简单的黑题首先我们发现模数为99824435399824 ...
存在就不插入_DOM 插入节点和三个Child方法
插入节点 insertBefor(); 插入格式:父节点.insertBefor( 插入节点,旧节点 )功能:将插入的节点插入到旧节点之前举个小例子:创建一个strong节点,将这个节点插入到span ...
全球5G专利能力榜T0P15出炉：谁是冠军？
来源:通信产业网第50个世界电信和信息社会日(5月17日)即将到来.在5G即将商用的关口,今年,世界电信日的主题定调为"缩小标准化差距". 实际上,标准专利对通信技术发展起着至关 ...
软件项目经理新手上路9 - 谁是你的敌人？
谁是你的敌人,这是个问题.是他们与你为敌,还是你与他们为敌?有句话说得好,心中无敌,则天下无敌. 1. 小故事张三是E项目的项目经理,E项目是一个美国与中国联合多地开发的项目.项目初期,因为美国员工 ...
[翻译]AKKA笔记 - CHILD ACTORS与ACTORPATH -6
原文:http://rerun.me/2014/10/21/akka-notes-child-actors-and-path/ Actor是完全的继承结构.你创建的任何Actor肯定都是一个其他Act ...

谁是谁的first-child

谁是谁的first-child相关推荐

最新文章

热门文章