属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2

伪类专门用来表示元素的一种的特殊状态

当我们需要为处在这些特殊状态的元素设置样式时, 就可以使用伪类

a:link {color: #FF0000}		/* 未访问的链接 */

a:visited {color: #00FF00}	/* 已访问的链接 */

a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */

a:active {color: #0000FF}	/* 选定的链接 */

:first-child 伪类

:first-child 伪类来选择元素的第一个子元素

例子 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> 元素

在下面的例子中，选择器匹配所有 <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> 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <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>

为p标签中选中的内容使用样式

可以使用::selection伪类

(具有浏览器兼容性问题)

-------------------------------------------------------

:first-child   可以选中第一个子元素

:last-child   可以最后一个子元素

:nth-child() 可以选中任意位置的子元素 , 该选择器后面可以指定一个参数, 指定选定第几个子元素

:nth-child(even)  选中偶数位置的子元素

:nth-child(odd)  选中奇数位置的子元素

可用于表格隔行变色

 
 
 

:first-of-type

:last-of-type

:nth-of-type

在当前类型的子元素中排列

伪类选择器 :nth-child(even) :nth-child(odd) :nth-of-type的更多相关文章

  1. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  2. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  3. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  4. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  5. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

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

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  7. 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  8. CSS3新增的伪类选择器

    伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...

  9. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

  10. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. win10+UEFI下u盘安装ubuntu16.04

    本人电脑是华硕,由于要求使用linux所以安装: 1.首先给linux划出一个大分区,感觉最少50G: win10下磁盘管理,在最后的分区中压缩出50g,空间,其他的不用问了,也不用继续分区,一个大的 ...

  2. 我的Android进阶之旅------>Android中ListView中嵌套(ListView)控件时item的点击事件不起作的问题解决方法

    开发中常常需要自己定义Listview,去继承BaseAdapter,在adapter中按照需求进行编写,问题就出现了,可能会发生点击每一个item的时候没有反应,无法获取的焦点. 如果你的自定义Li ...

  3. 流畅python学习笔记第十八章：使用asyncio包处理并发(一)

    首先是线程与协程的对比.在文中作者通过一个实例分别采用线程实现和asynchio包实现来比较两者的差别.在多线程的样例中,会用到join的方法,下面来介绍下join方法的使用. 知识点一:当一个进程启 ...

  4. 二维码图片流转base64

    @RequestMapping(value = "/weChatImage",method = RequestMethod.GET)public Response weChatim ...

  5. 【Leetcode-easy】Valid Parentheses

    思路:读取字符串中的每一个字符,并与栈顶元素进行比较,如果匹配则栈顶元素出栈,否则进栈.直到全部元素都出栈,否则该括号字符串不合法.需要注意细节. public boolean isValid(Str ...

  6. uboot 2013.01 代码简析(1)开发板配置

    u-boot下载地址:ftp://ftp.denx.de/pub/u-boot/u-boot-2013.01.01.tar.bz2 下载之后对该文件进行解压. 我试着分析smdk2410_config ...

  7. wampserver发布常见问题

    1 之前使用wamp在本地通过localhost访问PHP网站,一直很正常,最近想要发布至服务器,需要域名解析,发现PHP网站无法使用ip登陆,比如输入ip+端口地址,会报错:you don't ha ...

  8. Cocos2d-x中定时器的使用

    CCTimer:轻量级的计时器 CCTimer (void) ccTime  getInterval (void) void  setInterval (ccTime fInterval) bool  ...

  9. 时间序列数据库概览——基于文件（RRD）、K/V数据库（influxDB）、关系型数据库

    一般人们谈论时间序列数据库的时候指代的就是这一类存储.按照底层技术不同可以划分为三类. 直接基于文件的简单存储:RRD Tool,Graphite Whisper.这类工具附属于监控告警工具,底层没有 ...

  10. codeforces 566D D. Restructuring Company(并查集)

    题目链接: D. Restructuring Company time limit per test 2 seconds memory limit per test 256 megabytes inp ...