属性 描述 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. python cookbook第三版学习笔记三：列表以及字符串

    过滤序列元素: 有一个序列,想从其中过滤出想要的元素.最常用的办法就是列表过滤:比如下面的形式:这个表达式的意义是从1000个随机数中选出大于400的数据 test=[] for i in range ...

  2. Mac root Operation not permitted

      在mac下sudo 拷贝和删除文件时提醒Operation not permitted. 网上查了一些资料,需要执行 chflags nouchg /path/to/item 命令. 赶紧照做, ...

  3. CSS3定时提示动画特效

    在线演示 本地下载

  4. dotnet core on Linux 环境搭建及入门demo

    首先感谢张善友大大提供的腾讯云实验室链接(https://www.qcloud.com/developer/labs/list). 以下是整个搭建过程及简单demo实例 1.搭建 .NET Core ...

  5. 算法（Algorithms）第4版 练习 1.3.21

    方法实现: //1.3.21 /** * find if some node in the list has key as its item field * * @param list the lin ...

  6. hdu 4704 sum（费马小定理+快速幂）

    题意: 这题意看了很久.. s(k)表示的是把n分成k个正整数的和,有多少种分法. 例如: n=4时, s(1)=1     4 s(2)=3     1,3      3,1       2,2 s ...

  7. ES搜索排序，文档相关度评分介绍——TF-IDF—term frequency, inverse document frequency, and field-length norm—are calculated and stored at index time.

    Theory Behind Relevance Scoring Lucene (and thus Elasticsearch) uses the Boolean model to find match ...

  8. ES 相似度算法设置（续）

    Tuning BM25 One of the nice features of BM25 is that, unlike TF/IDF, it has two parameters that allo ...

  9. Python实现结对编程项目

    Github (李昆乘)(陈俊豪) 开发流程 PSP2.1 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 ...

  10. Ubuntu下安装deb包命令

    原文地址:http://www.xitongzhijia.net/xtjc/20150206/37464.html 1.下载需要安装的deb包,输入以下命令安装: sudo dpkg -i packa ...