详解CSS3中的属性选择符(4)

作者:dudo 来源:dudo says 时间:2008-04-24 14:30:00 

:nth-of-type()

:nth-of-type()伪类和nth-child()伪类找使用方法十分相似,只不过他匹配的是规则中指明类型的元素。下面的规则将会匹配每个属于父元素中第三个子元素的p元素(属于第3个子元素的p在一个该当中可能会有很多,只不过他们位于不同的父元素下,dudo注):

p:nth-of-type(3) { background:#ff0; }

当你想确定是否已经指向了第三个p元素,这种方法会很有用。开始你可能觉得这和使用nth-child效果是一样的,但是nth-child(3)会把所有的子元素都计算进来,因此结果可能就会不一样,除非p所有的所有兄弟元素也都是p元素。

:nth-of-type伪类目前还没有浏览器支持。

:nth-last-of-type伪类
:nth-last-of-type伪类指向的元素在其后还有若干同类型的元素。和:nth-last-child伪类一样,它是从最后一个子元素向回数的。下面的规则将会匹配到倒数第二个兄弟元素p中(注意:是兄弟、同级别的节点):

p:nth-last-of-type(2) { background:#ff0; }

:nth-last-of-type()目前还没有浏览器支持。

:last-child伪类

:last伪类指向的是父元素中最后一个子元素。它和:nth-last-child(1)效果是一样的。下面的规则匹配所有属于父元素中最后一个子元素的p:

p:last-child { background:#ff0; }

:last-childe伪类可以在基于Mozilla的浏览器中使用。Opera不支持:last-childe伪类,在Safri中存在bug(上面的规则会匹配到所有的p元素)。令人稀奇是的它可以在OmniWeb(测试版本5.1.1)中正常使用,尽管这个浏览器是基于Safari的。这可能是因为Apple WebKit最新版本的回归,因为OmniWeb使用的WebKit通常要比Safari版本稍微低一点。

:first-of-type伪类
:first-of-type伪类指向同类型元素中的第一个元素。它和:nth-of-type(1)是一样的。

p:first-of-type { background:#ff0; }

:first-of-type伪类目前还没有浏览器支持。

:last-of-type伪类
:last-of-type伪类指向同类型元素中的最后一个元素。它和nth-last-of-type(1)是一样的。

p:last-of-type { background:#ff0; }

:last-of-type伪类目前还没有浏览器支持。

:only-child伪类
:only-childe伪类指向的是那些父元素中再没有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一样的(后者不够专业、简明)。

p:only-child { backgound:#ff0; }

:only-childe伪类目前可以在基于Mozilla的浏览器中使用。在Safari似乎被解释成了:first-child(上面的规则会被匹配到文档中所有第一个子元素p中)。

:only-of-type伪类
:only-of-type伪类指向的是那些父元素中再也没有与之类型相同的子元素。这和:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)相同(后者专业性不够)。

p:only-of-type { background:#ff0; }

:only-of-type伪类目前还没有浏览器支持。

标签:选择符,伪类,css3,浏览器
0
投稿

猜你喜欢

  • mysql删除操作其实是假删除问题

    2024-01-27 23:15:50
  • MySQL索引类型Normal、Unique和Full Text的讲解

    2024-01-20 09:56:19
  • pycharm永久激活方法

    2021-12-22 01:17:34
  • Java与Mysql锁相关知识总结

    2024-01-17 14:24:19
  • 用Dreamweaver设计实现网页过渡转换功能

    2008-09-04 10:09:00
  • ML神器:sklearn的快速使用及入门

    2023-04-17 04:42:09
  • 用MySQL做站点时如何记录未知错误的发生

    2010-09-30 14:11:00
  • MySQL索引下推详细

    2024-01-18 10:01:07
  • 基于Python编写简易文字语音转换器

    2023-12-28 19:24:54
  • oracle执行cmd的实现方法

    2009-04-24 12:10:00
  • Python单元和文档测试实例详解

    2023-01-01 19:08:06
  • 修改Vue打包后的默认文件名操作

    2024-06-07 16:03:07
  • MySQL表设计优化与索引 (九)

    2010-10-25 20:16:00
  • Python打包成exe文件的详细操作指南

    2023-01-18 06:35:33
  • Python列表解析操作实例总结

    2022-10-10 09:59:38
  • 网站设计做好超级链接的重要性

    2007-09-14 11:19:00
  • 最简单的tab切换实例代码

    2023-08-22 08:38:59
  • vue封装一个弹幕组件详解

    2024-05-09 15:28:38
  • Go 值传递与引用传递的方法

    2023-06-25 03:11:11
  • javascript设计模式 – 单例模式原理与应用实例分析

    2024-04-29 14:09:29
  • asp之家 网络编程 m.aspxhome.com