伪类选择器 :nth-child(even) :nth-child(odd) :nth-of-type
| 属性 | 描述 | 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的更多相关文章
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- CSS选择器之伪类选择器（元素）
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- javascript中replace( )方法的使用——有博主已经讲过了，但里面有一小丢丢知识错误，挺重要的部分，我就重提下，以免初学者弄错
阿里面试题:说出以下函数的作用是?空白区域应该填写什么? 其实这个问题http://www.phpstudy.net/b.php/105983.html解释的已经非常好了,思路也很顺,容易理解,本文将 ...
- C语言实现 操作系统 银行家算法
/**************************************************** 银行家算法 算法思想: 1. 在多个进程中,挑选资源需求最小的进程Pmin. 可能存在多类资 ...
- 【ansible】ansible部署方式以及部署包
最近研究ansible的使用,在使用pip安装的时候遇到很多奇怪的问题,为此采用了手动安装的方式,并编写了一键安装脚本. ansible要求机器必须安装python2.6以上版本,可以通过一下命令查看 ...
- angularJs自定义模块
<script type="text/javascript"> var myApp = angular.module("myApp",[]); my ...
- systemclock sleep 睡眠
- Spark与缓存
预期成果 1.1 当前问题 当前以图搜图应用存在的问题: 当前使用spark RDD方案无法达到数据实时加载(每10分钟加载一次,虽然可配,但太短可能会有问题) Spark RDD内存会被分为两部 ...
- Linux内核--并发【转】
本文转自自:http://www.jianshu.com/p/035550ae05d2 为什么会产生并发 1.多个用户同时登陆的时候,他们有可能在任何时刻以任意的组合调用内核代码. 2.smp系统可能 ...
- Linux学习之路（三）搜索命令
1.文件搜索命令locate 2.命令搜索命令whereis与which 3.字符串搜索命令grep 4.find命令与grep命令的区别 locate命令相对于find命令搜索非常快,find命令在 ...
- 分享知识-快乐自己：oracle表分区详解
从以下几个方面来整理关于分区表的概念及操作: 1)表空间及分区表的概念: 2)表分区的具体作用: 3)表分区的优缺点: 4)表分区的几种类型及操作方法: 5)对表分区的维护性操作: 1):表空间及分区 ...
- centos7搭建mysql-5.7.22主从复制
mysql7.7.22主从复制 本项目是根据真实环境搭建编写出文档,文档中的目录也是根据自己公司环境所创建.公司原来是一台服务器搭建的数据库(5.7.22),由于业务的扩展需要搭建一台从服务器,减轻主 ...