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. spring-boot系列：初试spring-boot

    部署父工程 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http: ...

  2. 在EC2上安装MEAN环境

    本文在个人博客上的地址为URL,欢迎品尝. 搭建决策树项目外网DEMO尝试几个地方后,最后选择了EC2(Amazon Elastic Compute Cloud).选择的是最经济便宜的Amazon L ...

  3. 详解HTTP中的摘要认证机制（转）

    Basic认证方式是存在很多缺陷的,具体表现如下: 1,  Basic认证会通过网络发送用户名和密码,并且是以base64的方式对用户名和密码进行简单的编码后发送的,而base64编码本身非常容易被解 ...

  4. 现代程序设计——homework-10

    设计 对于MVC我的理解是这样的,V是台显示器,注意仅仅是一台比显示器普通显示器多几个按钮,用户按什么,按了什么该干什么都不用操心:M是实体的软件抽象,假设实体可以但不执行,我就可以一步一步走,实体可 ...

  5. 黄金点游戏之客户端(homework-05)

    0. 摘要 之前我们玩了2次黄金数游戏,我也幸运的得到了一本<代码大全>,嘿嘿.这次的作业是一个Client/Server程序,自动化完成多轮重复游戏. 我完成了Client部分,使用C# ...

  6. 转载yield关键字理解

    实现IEnumerable接口及理解yield关键字   [摘要]本文介绍实现IEnumerable接口及理解yield关键字,并讨论IEnumerable接口如何使得foreach语句可以使用. 本 ...

  7. struts validate

    1  login.jsp方式1 <%@ page language="java" import="java.util.*" pageEncoding=&q ...

  8. xmlBean学习二

    由上一遍的准备工作完成后,可以很简单的就进行对xml文件的操作, package com; import java.io.File; import java.io.IOException; impor ...

  9. readonly 关键字的用法

    readonly 关键字是可以在字段上使用的修饰符. 当字段声明包括 readonly 修饰符时,该声明引入的字段赋值只能作为声明的一部分出现,或者出现在同一类的构造函数中. 示例 在此示例中,字段y ...

  10. PostgreSQL的 initdb 源代码分析之二

    继续分析 下面这一段,当 initdb --version 或者  initdb --help 才有意义. ) { ], || strcmp(argv[], ) { usage(progname); ...