css3-伪类选择器使用

转载 2015年07月10日 13:47:16

web前端同学都需要清楚伪类选择器的使用。像:link,:visited,:hover,:active,:focus,:first-child,:lang大家已经很熟悉了,今天说说css3中新增的:nth-child()和:nth-of-type()。

:nth-child()用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

在w3c中说明的 n 可以是数字、关键词或公式。常用的有4中写法。

1.具体的数字

:nth-child(n):匹配父元素中第n个元素,例:li:nth-child(3){background:green;}

2.倍数

:nth-child(an):匹配父元素中第a数倍的元素,例:li:nth-child(2n){background:red;}

3.倍数分组

:nth-child(an+b)或:nth-child(an-b):先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n-1。

4.奇偶写法

:nth-child(odd)和:nth-child(even):分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

:nth-of-type()的用法

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.这个的用法和:nth-child(n)的用法类似,不同的是:nth-child(n)所匹配的元素必须有父元素包着。但:nth-of-type(n)可以匹配特定类型元素行。

浏览器支持

所有主流浏览器均支持 :nth-child() 选择器,除了 IE8 及更早的版本。

css3伪类选择器使用总结

伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器 大部分伪类选择器如下图所示 :root返回 在下面的示例中: div > p:only-child{     color:re...
  • MOONCOM
  • MOONCOM
  • 2016年12月26日 19:44
  • 3165

伪类选择器、文字、颜色

一、选择器 1、伪类选择器--运动 transition:1s   //运动的时间  兼容性:火狐、谷歌  ie11 ie10   ie9以下,用js操作 //老版的兼容性问题    浏览器的内核...
  • u013184759
  • u013184759
  • 2016年01月12日 22:12
  • 736

浅谈a伪类选择器的书写顺序

首先先声明一下标签a伪类选择器的正确书写顺序如下 a:link a:visited a:hover a:active  为什么必须得按顺序呢?   这个问题可以这样来解答。 ...
  • u013853928
  • u013853928
  • 2016年07月26日 16:09
  • 968

CSS :before :after 伪类选择器

CSS :before :after 伪类选择器 所有主流浏览器都支持 :after 选择器。 注释:对于 IE8 及更早版本中的 :after,必须声明 。   :before   语法:S...
  • whereismatrix
  • whereismatrix
  • 2015年03月24日 10:11
  • 2213

伪类选择器 before 和after的使用 实例 制作圆角

比如:.panel-czbk > .panel-heading::before, .panel-czbk > .panel-heading::after { content: ' '; wid...
  • duanmingyue789
  • duanmingyue789
  • 2017年06月12日 21:43
  • 196

CSS3第一日--属性选择器与伪类选择器

属性选择器在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 CSS3新增了3个新的属性选择器,分别是:1、E[attr^="value"]:指定元素中的属性名,并且这个属性名有属性值存...
  • ljl890705
  • ljl890705
  • 2015年12月30日 17:22
  • 1020

伪类选择器hover应用

伪类选择器hover 主要是当鼠标悬停在某个元素上时,其样式会根据设定的属性进行变化,一般用于文字或是背景图片的修改;    说多了都是眼泪,直接上代码!     Eg: ...
  • qq545698514
  • qq545698514
  • 2016年12月12日 14:07
  • 611

CSS选择器详解(伪类)

CSS选择器详解 之 伪类伪类对大小写不敏感结构伪类选择器结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文档变得...
  • Panda_m
  • Panda_m
  • 2015年11月28日 19:09
  • 11166

html中伪类选择器

html中伪类选择器 伪类选择器,并不是像之前css中选择器一样,选择一种标签,而是选择标签的一种状态,是属于html标记语言内容。    例如以a标签为例,    a:link{ }    表...
  • aozeahj
  • aozeahj
  • 2016年10月23日 10:00
  • 1494

css3之结构性伪类选择器

本篇介绍伪类选择器以及伪元素。 1、类选择器  在css中可以使用类选择器把相同的元素定义成不同的样式。比如: p.left{text-align: left} p.rigth{text-align...
  • u012859748
  • u012859748
  • 2016年09月21日 19:16
  • 353
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3-伪类选择器使用
举报原因:
原因补充:

(最多只允许输入30个字)