看过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. 【JavsScript】XMLHttpRequest2的进步之处

    本文参考自:XMLHttpRequest2 新技巧 (重点保留demo,方便自己日后查阅) HTML5是现在web开发中的热点,虽然关于web app和local app一直有争论,但是从技术学习的角 ...

  2. Xstream之常用方式与常用注解

    示例代码 Blog teamBlog = new Blog(new Author("Guilherme Silveira")); teamBlog.add(new Entry(&q ...

  3. 【CF】509E Pretty Song

    数学规律题,很容易计算的.以初始测试数据3为例.Str    Y I S V O W E L--------------------------Len    1  2 3 4  | 5 6 7  8Y ...

  4. Apache HBase RPC身份验证中间人安全措施绕过漏洞(CVE-2013-2193)

    漏洞版本: Apache Group HBase 0.94.x Apache Group HBase 0.92.x 漏洞描述: BUGTRAQ ID: 61981 CVE(CAN) ID: CVE-2 ...

  5. Monkey ‘mk_request_header_process’函数输入验证漏洞

    漏洞名称: Monkey ‘mk_request_header_process’函数输入验证漏洞 CNNVD编号: CNNVD-201308-003 发布时间: 2013-08-22 更新时间: 20 ...

  6. hadoop2.0安装和配置

    hadoop2与hadoop1的配置有些许不同,最主要的是hadoop1里的master变成了yarn 这篇文直接从hadoop的配置开始,因为系统环境和jdk和hadoop1都是一样的. hadoo ...

  7. java生成随机整数

    1. 使用Random类的nextInt方法: Random rand = new Random(); rand.nextInt(max);, 此时输出[0,max),注意右边是开区间,如果需要设定最 ...

  8. hdu 4405概率dp

    #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...

  9. 敏捷开发松结对编程系列：L型代码结构案例StatusFiltersDropdownList（中）

    这是松结对编程的第22篇(专栏目录). 接前文 业务代码 比较长,基本上就是看被注释隔开的三大段,先显示状态群筛选链接,然后是单个状态筛选,然后是显示下拉框的当前选中项,最后显示下拉框. public ...

  10. 回某位朋友问题备受phpcgi.exe煎熬现在cpu跑满（解决方案）

    (本文原创,但是cgi参数参考一个大神写的针对小服务器的,希望大家积极投票哦) 下面是对php-cgi.ext过多引起服务器cup%的解决方法,希望对大家有帮助;大多数情况是发生在第四项上;   解决 ...