看过CSS伪类选择器之后，心想也就如此嘛，: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;}

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

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

谁是谁的first-child的更多相关文章

  1. MapReduce剖析笔记之七：Child子进程处理Map和Reduce任务的主要流程

    在上一节我们分析了TaskTracker如何对JobTracker分配过来的任务进行初始化,并创建各类JVM启动所需的信息,最终创建JVM的整个过程,本节我们继续来看,JVM启动后,执行的是Child ...

  2. [翻译]AKKA笔记 - CHILD ACTORS与ACTORPATH -6

    原文:http://rerun.me/2014/10/21/akka-notes-child-actors-and-path/ Actor是完全的继承结构.你创建的任何Actor肯定都是一个其他Act ...

  3. php php-5.6.4.tar.bz2 apache 兼容问题 child pid 27858 exit signal Segmentation fault

    环境 [root envirotar]# uname -a Linux i2..el6.x86_64 # SMP Thu Jul :: UTC x86_64 x86_64 x86_64 GNU/Lin ...

  4. [ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action

    概括的讲,View中的内容可以分为静态和动态两部分.静态内容一般是html元素,而动态内容指的是在应用程序运行的时候动态创建的内容.给View添加动态内容的方式可归纳为下面几种: Inline cod ...

  5. 调用Child Package

    使用Execute Package Task,能够在一个package中调用并执行其他package,被调用的Package称作 Child Package,Execute Package Task ...

  6. ORA-02292: integrity constraint (xxxx) violated - child record found

    在更新表的主键字段或DELETE数据时,如果遇到ORA-02292: integrity constraint (xxxx) violated - child record found 这个是因为主外 ...

  7. Child <- many-to-one ->Parent

    网上找到个描述的很精妙的例子 Child   <-   many-to-one   ->Parent         class   Child   {         private   ...

  8. [NHibernate]Parent/Child

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  9. ScrollView can host only one direct child

    Android 采用ScrollView布局时出现异常:ScrollView can host only one direct child. 异常原因: 主要是ScrollView内部只能有一个子元素 ...

  10. java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.

    在ViewPager中,用Fragment显示页面时,报错: java.lang.IllegalStateException: The specified child already has a pa ...

随机推荐

  1. ALTER TABLE 语句与 FOREIGN KEY 约束"FK_SCHEDULE_REFERENCE_POSTCONF"冲突。

    主要原因是因为两个表中有数据不匹配,只要把不匹配的数据删掉就行了.

  2. JQUERY 插件开发——LAZYLOADIMG（预加载和延迟加载图片)

    开发背景 本插件开发是近期写的最后一个插件了,接下来我想把最近研究的redis最为一个系列阐述下.当然Jquery插件开发是我个人爱好,我不会停止,在将来的开发中我会继续完善,当然也会坚持写这个系列的 ...

  3. tyvj 1153 间谍网络 tarjan有向图强连通

    P1153 - 间谍网络 From ForeverBell    Normal (OI)总时限:13s    内存限制:128MB    代码长度限制:64KB 描述 Description 由于外国 ...

  4. [操作系统]iOS6与iOS7屏幕适配技巧

    一.没有包装任何 导航控制器 或者 UITabBarController 1.控制器的view是UIScrollView\UITableView\UICollectionView时(控制器是UITab ...

  5. Netty版本升级血泪史之线程篇

    1. 背景 1.1. Netty 3.X系列版本现状 根据对Netty社区部分用户的调查,结合Netty在其它开源项目中的使用情况,我们可以看出目前Netty商用的主流版本集中在3.X和4.X上,其中 ...

  6. DPI/PPI/dp/sp/px/pt 移动设计手册

    转自DPI/PPI/dp/sp/px/pt 移动设计手册 做移动设计的同学,不管是原生app或者web app,应该对字体字号都是很头痛的问题.根本原因是,我们用唯一分辨率的电脑,设计各个不同尺寸大小 ...

  7. 【HDU3341】 Lost's revenge （AC自动机+状压DP）

    Lost's revenge Time Limit: 5000MS Memory Limit: 65535KB 64bit IO Format: %I64d & %I64u Descripti ...

  8. git在myelispse中的安装

    1.git在myelispse中的安装 http://blog.csdn.net/chinaonlyqiu/article/details/8830050

  9. NIOS中双CPU系统的构建

    首先构建SOPC系统,先分别添加两个CPU,分别命名为CPU1和CPU2,设置如下图,其中CPU1运行VGA的乒乓游戏,CPU2运行音乐,这里为了简单,音乐用LED来表示. 这里CPU1选择是中等容量 ...

  10. Java---网络蜘蛛-网页邮箱抓取器~源码

    刚刚学完Socket,迫不及待的做了这个网页邮箱抓取~~~ 现在有越来越多的人热衷于做网络爬虫(网络蜘蛛),也有越来越多的地方需要网络爬虫,比如搜索引擎.资讯采集.舆情监测等等,诸如此类.网络爬虫涉及 ...