:first-child

选择某个元素的第一个子元素(IE6不支持)

:last-child

选择某个元素的最后一个子元素

:first-of-type

[CSS3]选择一个上级元素下的第一个同类子元素

:last-of-type

[CSS3]选择一个上级元素的最后一个同类子元素

:only-child

[CSS3]选择的元素是它的父元素的唯一一个了元素(IE6-8不支持)

:only-of-type

[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素(IE6-8不支持)

:nth-child()

[CSS3]选择某个元素的一个或多个特定的子元素(IE6-8不支持)

:nth-last-child()

[CSS3]选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算(IE6-8不支持)

:nth-of-type()

[CSS3]选择指定的元素(IE6-8不支持)

:nth-last-of-type()

[CSS3]选择指定的元素,从元素的最后一个开始计算(IE6-8不支持)

下面用例子来说明以上伪类的用法。

1.1      first、last和only伪类选择器

<body>

<p>($1)这个段落是其父元素(body)的首个子元素。</p>

<h1>欢迎访问nDos的博客</h1>

<p>($2)这个段落不是其父元素的首个子元素,也不是其父元素的最后一个子元素。</p>

<div>

<p>($3)这个段落是其父元素(div)的首个子元素。</p>

<p>($4)这个段落是其父元素(div)的最后一个子元素。</p>

</div>

<nav>

<ul>($4)这个是ul元素,是父元素(nav)的首个子元素。。</ul>

<p>($5)这个段落是其父元素(nav)的段落子元素中的首个子元素。</p>

<p>($6)这个段落是其父元素(nav)的段落子元素中的最后一个子元素。</p>

<ul>($7)这个是ul元素,是父元素(nav)的最后一个子元素。。</ul>

</nav>

<div>

<p>($8)这个段落是其父元素(div)的唯一一个子元素。</p>

</div>

<nav>

<span>这个span也是父元素(nav)的一个子元素</span>

<p>($9)这个段落不是其父元素(nav)的唯一一个子元素。</p>

</nav>

<p>($10)这个段落是其父元素(body)的最后一个子元素。</p>

</body>

p:first-child { background:red; } 原理:首先p会筛选出页面所有的<p>标签,:first-child再从这些<p>标签中选中是其父元素的首个子元素的<p>标签,应用{ background:red; }这个样式。对于上面的例子,则会给$1、$3和$8添加红色的背景色。

p:last-child { background:yellow; } 流程是一样的,对于上面的例子则会给$4、$8、$9和$10添加黄色的背景色。

p:first-of-type { background:red; } 与:first-child比较,除了在$1、$3和$8添加红色的背景色外,$5和$9也将会被添加红色的背景色。原理:首先p会筛选出页面所有的<p>标签,:first-of-type再从这些<p>标签中选中排在第一位的<p>标签。通俗的讲,:first-of-type很强势,只要某个标签(比如div标签)内含有<p>标签,它不管怎么样都会选择一个,选择的这个<p>标签是div标签中第一个出现的。

p:last-of-type { background:yellow; } 流程是一样的,对于上面的例子则会给$4、$6、$8、$9和$10添加黄色的背景色。

p:only-child { background:red; } 原理:首先p会筛选出页面所有的<p>标签,然后一一确认这些<p>标签哪些没有任何的兄弟元素。对于上面的例子$8是没有任何的兄弟的元素的,因此会被添加红色的背景色。

p:only-of-type { background:red; } 与:only-child比较,除了$8以外,$9也会被添加红色的背景色。原理就不做讲解了,参照:first-of-type。

不带参数的伪类都介绍完了,下面介绍表格中带参数的4个伪类。

1.2      nth伪类选择器

<!DOCTYPE html>

<html><head>

<style>

p { width:50px;float:left;text-align:center;border:1px solid gray; }

</style>

</head>

<body>

<h1>nDos的个人博客</h1>

<p>$1</p><p>$2</p><p>$3</p><p>$4</p><p>$5</p>

<p>$6</p><p>$7</p><p>$8</p><p>$9</p><p>$10</p>

</body></html>

上述例子在页面中显示的效果如下图:

先看看伪类添加之后,会产生什么样的效果。比如下述nth伪类:

p:nth-child(odd) { background:red; } 加入之后效果如下图所示(odd是奇数的意思):

有意思的事情发生了,为什么不是奇数的段落背景色为红色呢?先放下这个问题,再来看看下面这个伪类:p:nth-of-type(odd) { background:red; },显示效果如下图所示:

原理(上例):nth-child是计算body中所有的子元素(包括h1),然后按照奇偶进行排列,那么“第一个”p标签的顺序标号成为了“2”。而nth-of-type则不同,它是计算body中所有的标签为p的子元素,其他的子元素它不管,然后按照奇偶进行排列。

至于:nth-last-child()和:nth-last-of-type()原理也是一样的,不过它计算的方式,是倒序的。关于这两个伪类就不多展开了。

虽然不展开:nth-last-child()和:nth-last-of-type(),但是nth-child还有东西需要展示一下,比如这个伪类p:nth-child(2n+1) { background:red; },显示效果与p:nth-child(odd) { background:red; }是一模一样的,这里就不贴图了。

其中需要说的是这个n,写成2i+1,行不行?不行!浏览器认不出来,浏览器只认识n。当然这是规则,就不深究了,下面要继续讨论的是,它只能进行奇偶选择吗?再来看看这个伪类:

p:nth-child(3n+1) { background:red; } 渲染的结果如下图所示:

因为有h1这个标签在,所以这里计算起来有点不太好理解,下面去掉h1那个标签。看看下图:

原理:n是从0开始取值,逐个代入。3n+1的结果就是 1、4、7、10、13……当然例子这里没有那么多元素。当然也可以试试:p:nth-child(5n+1) { background:red; } 等等。

甚至可以试试下面这些伪类:

p:nth-child(-n+5) { background:red; }

p:nth-child(n+5) { background:red; }

p:nth-child(n) { background:red; }

对于nth-of-type、nth-last-child和nth-last-of-type的玩法也脱离不了上面的这些东西,只不过是计算的元素标签的集合不同,计算的开始位置不同。写再多也是重复,就不展开了。

CSS选择器之伪类选择器(元素)的更多相关文章

  1. CSS选择器之伪类选择器(伪元素)

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  2. CSS选择器之伪类选择器(交互)

    :link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...

  3. CSS属性、伪类选择器,CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  4. CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法

    一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...

  5. CSS新增的伪类选择器

    :root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...

  6. CSS选择符-----伪类选择符

    Element:hover E:hover { sRules }  设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> < ...

  7. css 中的伪类选择器before 与after

    .cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...

  8. js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

  9. js进阶 10-7 简单的伪类选择器可以干什么

    js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...

随机推荐

  1. 自己实现简单的RSA秘钥生成与加解密(Java )

    最近在学习PKI,顺便接触了一些加密算法.对RSA着重研究了一下,自己也写了一个简单的实现RSA算法的Demo,包括公.私钥生成,加解密的实现.虽然比较简单,但是也大概囊括了RSA加解密的核心思想与流 ...

  2. Python小白学习之路(十八)—【内置函数三】

    一.对象操作 help() 功能:返回目标对象的帮助信息 举例: print(help(input)) #执行结果 Help on built-in function input in module ...

  3. 移动端 实现ul横向滚动条

    ul { display: flex; width: 100%; height: 3.333333rem; background: #fff; padding: 0.373333rem 0.32rem ...

  4. Eclipse for android 实现代码自动提示智能提示功能

    Eclipse for android 实现代码自动提示智能提示功能,介绍 Eclipse for android 编辑器中实现两种主要文件 java 与 xml 代码自动提示功能,解决 eclips ...

  5. CentOS7 yum方式安装 MongoDB 3.4 复制集

    CentOS7 yum方式安装 MongoDB 3.4 环境.准备 Centos7 系统 配置MongoDB的yum源,添加文件/etc/yum.repos.d/mongodb-org-3.4.rep ...

  6. Android之从TCP/IP、HTTP看Socket通信

    1.概念 TCP/IP:属于传输层/网络层协议.手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传 ...

  7. [转] TCPIP 网络协议层对应的RFC文档

    TCPIP网络协议层对应的RFC文档 RFC - Request For Comments 请求注解 TCP/IP层 网络协议 RFC文档 Physical Layer Data Link Layer ...

  8. 在商城系统中使用设计模式----简单工厂模式之在springboot中使用简单工厂模式

    1.前言: 不了解简单工厂模式请先移步:在商城中使用简单工厂.在这里主要是对springboot中使用简单工厂模式进行解析. 2.问题: 什么是简单工厂:它的实现方式是由一个工厂类根据传入的参数,动态 ...

  9. es6中let,const区别与其用法

    ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScri ...

  10. redis-集群创建脚本

    之前建好了redis集群, 但没有找到集群重启的机制, 停电2次, 重新创建太麻烦, 于是写了个脚本辅助启动 redis的创建过程可以看: http://www.cnblogs.com/wenbron ...