看过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;}

谁是谁的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. NHibernate configuration

    http://blog.csdn.net/dbcolor/article/details/2061929

  2. [BZOJ 1006] [HNOI2008] 神奇的国度 【弦图最小染色】

    题目链接: BZOJ - 1006 题目分析 这道题是一个弦图最小染色数的裸的模型. 弦图的最小染色求法,先求出弦图的完美消除序列(MCS算法),再按照完美消除序列,从后向前倒着,给每个点染能染的最小 ...

  3. Water Tree

    Codeforces Round #200 (Div. 1) D:http://codeforces.com/problemset/problem/343/D 题意:给你一颗有根树,树的每个节点有一个 ...

  4. Tomcat7+Redis存储Session（转）

    PS:截止到2015-05-12前是不支持Tomcat8的,详情见官网:https://github.com/jcoleman/tomcat-redis-session-manager 前提:你已经部 ...

  5. RedHat Enterprise Linux 6.4-x86_64 md5:467B53791903F9A0C477CBB1B24FFD1F

    RedHat Enterprise Linux 6.4-x86_64 md5:467B53791903F9A0C477CBB1B24FFD1F 这是下载地址:http://pan.baidu.com/ ...

  6. Linux Kernel ‘perf’ Utility 本地提权漏洞

    漏洞名称: Linux Kernel ‘perf’ Utility 本地提权漏洞 CNNVD编号: CNNVD-201309-050 发布时间: 2013-09-09 更新时间: 2013-09-09 ...

  7. 建立HttpsConnection

    1建立HttpConnection,这种连接比较简单,但是是不安全的,网上例子比较多,现在主要说说如果建立HttpsConnection,这种连接时通过SSL协议加密,相对更安全,一般使用这种连接传输 ...

  8. 15个值得开发人员关注的jQuery开发技巧和心得

    在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! 1. 尽量使用最新版本的jQuery类库 jQuery项目中使用了大量的创新.最好的方法来提高 ...

  9. JavaScript高级程序设计8.pdf

    基本包装类型 为了便于操作基本类型值,ECMAScript定义了3个特殊的引用类型Boolean,Number和String.这些类型与本章介绍的其他用类型相似,同时也具备与各自的基本类型相应的特殊行 ...

  10. SPI,UART,I2C都有什么区别，及其各自的特点

    区别: SPI:高速同步串行口.3-4线接口,收发独立.可同步进行 UART:通用异步串行口.按照标准波特率完成双向通讯,速度慢 I2C:一种串行传输方式,三线制,网上可找到其通信协议和用法的 3根线 ...