看过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. BZOJ 1237 配对

    Description 你有\(n\)个整数\(A_{i}\)和\(n\)个整数\(B_{i}\).你需要把它们配对,即每个\(A_{i}\)恰好对应一 个\(Bp_{i}\).要求所有配对的整数差的 ...

  2. A simple Gaussian elimination problem.

    hdu4975:http://acm.hdu.edu.cn/showproblem.php?pid=4975 题意:给你一个n*m的矩阵,矩阵中的元素都是0--9,现在给你这个矩阵的每一行和每一列的和 ...

  3. Java位运算总结：位运算用途广泛《转》

    前天几天研究了下JDK的Collection接口,本来准备接着研究Map接口,可是一查看HashMap类源码傻眼咯,到处是位运算实现,所以我觉得还是有必要先补补位运算知识,不然代码看起来有点费力.今天 ...

  4. 【POJ1330】Nearest Common Ancestors（树链剖分求LCA）

    Description A rooted tree is a well-known data structure in computer science and engineering. An exa ...

  5. Oracle导出存储过程

    SQL> SELECT * FROM dba_directories ; OWN DIRECTORY_NAME DIRECTORY_PATH ------- ------------------ ...

  6. 【HDOJ】1325 Is It A Tree?

    并查集.需要考虑入度. #include <stdio.h> #include <string.h> #define MAXNUM 10005 int bin[MAXNUM]; ...

  7. C++ Prime：指针

    指针与引用的区别:1.指针本身就是一个对象,允许对指针赋值和拷贝,而且在指针的生命周期内它可以先后指向几个不同的对象:其二:指针无需在定义时赋值.指针在块作用域内定义如果没有被初始化,也将拥有一个不确 ...

  8. 利用MVC的过滤器实现url的参数加密和解密

    最近在与一个IOS应用做接口对接,之前一直都没有遇到什么很大的问题,但是有一天发现可以通过软件解析app的url,然后直接通过url的拼接修改接口数据,这一下使得数据的安全性和准确性都降低了,于是就想 ...

  9. Linux学习笔记21——线程同步的两种方式

    一  用信号量同步 1 信号量函数的名字都以sem_开头,线程中使用的基本信号量函数有4个 2 创建信号量 #include<semaphore.h> int sem_init(sem_t ...

  10. openStack云平台虚拟桌面galera mysql 3节点集群实例实战 调试完成

    被复制节点: /usr/local/mysql/bin/mysqld_safe --wsrep_cluster_address=gcomm:// >/dev/null &复制节点01: ...