1. 匹配第一个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：

<html>

<head>

<style type="text/css">

p:first-child {

  color: red;

  }

</style>

</head>

<body>

<p>some text</p>

<p>some text</p>

</body>

</html>

2.匹配所有 <p> 元素中的第一个 <i> 元素

<html>

<head>

<style type="text/css">

p > i:first-child {

  font-weight:bold;

  }

</style>

</head>

<body>

<p>some <i>text</i>. some <i>text</i>.</p>

<p>some <i>text</i>. some <i>text</i>.</p>

</body>

</html>

3.匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

<html>

<head>

<style type="text/css">

p:first-child i {

  color:blue;

  }

</style>

</head>

<body>

<p>some <i>text</i>. some <i>text</i>.</p>

<p>some <i>text</i>. some <i>text</i>.</p>

</body>

</html>

css笔记03：伪类first-child的更多相关文章

  1. CSS笔记之伪类与伪元素

    伪类分为两种:UI伪类 与 结构化伪类 UI伪类:a:link{}    a:hover{}   a:active{}  a:visited{} input[type='text']:focus{} ...

  2. CSS Pseudo-classes（伪类）

    CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法 伪类的语法: selector:pseudo-class {property:value;} CSS ...

  3. CSS属性、伪类选择器，CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  4. CSS权威指南之css声明，伪类，文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

  5. iOS Web开发激活css的active伪类

    最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效, ...

  6. css定位 浮动 伪类 margin

    一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子 才能使用margin: auto; ...

  7. css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

  8. CSS选择器：伪类（图文详解）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式. ...

  9. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  10. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

随机推荐

  1. Maven管理多模块项目

    首先,我们要明确的多模块项目的含义,它是指一个应用中包含多个module.一般来说,一个应用单独部署成服务,只是打包的时候,maven会把各个module组合在一起.各模块一般单独打成jar放到lib ...

  2. 无线 WIFI 的13个信道频率范围

    目前主流的无线WIFI网络设备不管是802.11b/g还是802.11b/g/n 一般都支持13个信道.它们的中心频率虽然不同,但是因为都占据一定的频率范围,所以会有一些相互重叠的情况.下面是13个信 ...

  3. 第二百五十二天 how can I 坚持

    明天就要去旅游了...还不知道去哪呢,只知道要滑雪,要泡温泉,还要去西柏坡..哈哈. 其他没什么了吧.只是昨晚刷的鞋还没干,不知道明天会不会干,明天还得早走会,九点之前就得到. 还不知道坐车坐多长时间 ...

  4. jvm所占空间的配置

    http://www.cnblogs.com/mingforyou/archive/2012/03/03/2378143.html

  5. Gym 100507J Scarily interesting! （贪心）

    Scarily interesting! 题目链接: http://acm.hust.edu.cn/vjudge/contest/126546#problem/D Description This y ...

  6. POJ 2253 Frogger （dijkstra 最大边最小）

    Til the Cows Come Home 题目链接: http://acm.hust.edu.cn/vjudge/contest/66569#problem/A Description The i ...

  7. JSF 2 multiple select listbox example

    In JSF, <h:selectManyListbox /> tag is used to render a multiple select listbox – HTML select ...

  8. Spring Auto proxy creator example

    In last Spring AOP examples – advice, pointcut and advisor, you have to manually create a proxy bean ...

  9. OLEVARIANT的替代——FIREDAC的TFDJSONDataSets和TFDJSONDeltas

    OLEVARIANT——这个COM的序列格式,也是DATASNAP已使用了20年的序列格式,在20年以后的今天,终于有了它的替代者:FIREDAC的TFDJSONDataSets和TFDJSONDel ...

  10. Contest 7.21（贪心专练）

    这一次都主要是贪心练习 练习地址http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26733#overview Problem APOJ 13 ...