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. Designing Evolvable Web API with ASP.NET 随便读，随便记 “The Internet,the World Wide Web,and HTTP”

    1982年,诞生了 Internet; 1989年,诞生了World Wide Web . "World Wide Web"的构造为主要由 三部分构成: resources 资源 ...

  2. 瞬间从IT屌丝变大神——分工安排

    分工安排主要包含以下内容: 公共组件(包括common.css和common.js)一人维护,各子频道专人负责,每个频道正常情况下由一人负责,要详细写明注释,如多人合作,维护的人员注意添加注释信息,具 ...

  3. Oracle11g TNS-12541：TNS无监听程序

    Oracle11g TNS-12541:TNS 无监听程序 问题描述:Oracle11.2客户端访问服务器端服务一直正常,隔了一段时间没有用,再次连接时出现错误“TNS-12541:TNS 无监听程序 ...

  4. Google AppEngine 创建的例子

    1.guestbook: http://chenyy-gac-test.appspot.com/ 2.time clock: http://chenyy-gac-20150922.appspot.co ...

  5. markdown常用html标签

    换行 测试<br />一下 效果:测试一下 标记 <mark>测试一下</mark> 效果:测试一下 空格         测试一下 效果:        测试一下 ...

  6. Unity3D中的Shader

    简单的说,Shader是为渲染管线中的特定处理阶段提供算法的一段代码.Shader是伴随着可编程渲染管线出现的,从而可以对渲染过程加以控制. 1. Unity提供了很多内建的Shader,这些可以从官 ...

  7. mysql注册服务

    http://www.2cto.com/database/201301/185456.html ____________________________________________________ ...

  8. hadoop streaming 编程

    概况 Hadoop Streaming 是一个工具, 代替编写Java的实现类,而利用可执行程序来完成map-reduce过程.一个最简单的程序 $HADOOP_HOME/bin/hadoop jar ...

  9. HDU 5816 Hearthstone （状压DP）

    Hearthstone 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5816 Description Hearthstone is an onlin ...

  10. 菜鸟学习 git

    到新公司学习和使用 git 有一段时间了.不得不说 git 真的很牛逼,当然,git 的牛逼是建立在 Linux 之父的牛逼的基础上的. 首先跪着推荐 git 学习网站:http://www.liao ...