首页 相关文章 CSS3伪类选择器:nth-child()

CSS3伪类选择器:nth-child()

CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上标准。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来前瞻一下CSS3的一个伪类选择器:nth-child()

语法:

:nth-child(an+b)

为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+。

描述:

伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明。

第一种:简单数字...[ 查看全文 ]

2016-02-19 标签:
  • 标签:Web开发
    对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法。 第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 (EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。 (EG) li:n...[ 查看全文 ]
  • 标签:Web开发
    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。 h1 class="center" This heading will be center-aligned /h1 p class="center" This paragraph will also be center-aligned. /p ********...[ 查看全文 ]
  • 标签:Web开发
    选择器 p[name^=my]{font-size:14px} 选择器 ^= 讲规则应用到所有 name属性以my开头的p元素标签 p[name$=my]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性以my结尾的p元素标签 p[name*=my]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性包含my结尾的p元素上 选择器 、 + 、~ 选择器表示受影响的元素是第一个元素的子元素。 选择器+这 个选择器引用紧跟元素之后的元素,这两个元素...[ 查看全文 ]
  • 标签:Web开发
    说说nth-child(an+b)。 nth-child()这个东西,是CSS3中的一个伪类选择符,jQuery也拿来用了。 国内翻译教材《jQuery基础教程》中有一句这样的翻译“......因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div。”初读此句,总觉得不易理解,于是便有了google的冲动(在这里要强烈BS一下教育网,网速慢的比蜗牛还慢,打开google都要等半天,下载基本围绕在1...[ 查看全文 ]
  • 标签:Web开发
    一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com的其他文章。 准确而简洁的运用CSS选择器会达到非常好的效果。我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果。在实际工作中,最常...[ 查看全文 ]
  • 标签:Web开发
    去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。 序号选择器含义1. * 通用元素选择器,匹...[ 查看全文 ]
  • CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。 避免让这些瘟疫在你的标签中传播并保持其简洁和语义化的最佳方式,就是使用更复杂的CSS选择器,它们可以定位于...[ 查看全文 ]
  • 标签:Web开发
    前面一篇文章介绍了CSS页面布局中HTML结构化,本节讲解如何使用巧妙的使用CSS选择器。 id用于标识页面唯一元素,id的名称是控制某一内容块的手段,通过将某内容块置入div并赋予唯一的id,就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。 可以通过不同规则来定义不...[ 查看全文 ]
  • 标签:Web开发
    当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child+html {} * html {} 只对IE 7 *:first-child+html {} 只对IE 7 和现代浏览器 htmlbody {} 只对现代浏览器(非IE 7) html/**/body {} 最新的Opera 9以下版本 html:first-child {} Safari html[xmlns*="] body:last-child {} 要使用这些选择器,请在样式前写下这些...[ 查看全文 ]
  • 标签:Web开发
    在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(selector)。 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素。 类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[clas...[ 查看全文 ]
  • 标签:Web开发
    我很久以前就开始计划着整理一下CSS选择器的浏览器支持,因为CSS3增加了很多非常有用的选择器。之前我也写过一篇《使用CSS选择器创建个性化链接样式 》,作为对CSS选择器的初步研究。 kimblim网站整理了一份很全面的CSS选择器支持情况,我将其翻译过来并进行进一步的整理,将其尽可能的简化。同时结合evotech网站整理的CSS选择器支持列表,以及我自己平时总结的一些tips。 熟悉jQuery的人可能都知道,jQuer...[ 查看全文 ]
  • 标签:Web开发
    关于CSS选择器优先级,目前国内已有很多人进行过解释,但感觉不如人意,特别对于初学者,更是难以理解。这里我把W3C上所描述的规范以我的理解再解释一下,希望能给大家提供到帮助。 在Calculating a selector’s specificity上的原文摘选如下: A selector’s specificity is calculated as follows: count 1 if the declaration is from is a ’style’ attribute rather than a rule with a sel...[ 查看全文 ]
  • 标签:Web开发
    自从JQuery实现了Selector后,貌似其他一些JavaScript框架也开始向Selector靠拢,相继推出了自己的CSS选择器, 考虑到css选择器确实强大,所以,在easyUI中也添加了一个自己的cssSelector方法:easyUI.cssSelector('css选 择器',dom范围) CSS选择器实现原理: 一、解析 1、格式化数据,将css选择器转换成一种便于后面进行操作的格式,这一步很重要,这是数据结构部分,后面的实现都将以此为依据...[ 查看全文 ]
  • 标签:Web开发
    伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class): selector:pseudo-class {property: value} (选择符:伪类 {属性: 值}) 伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择...[ 查看全文 ]
  • 标签:Web开发
    id用于标识页面唯一元素,id的名称是控制某一内容块的手段,通过将某内容块置入div并赋予唯一的id,就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。 可以通过不同规则来定义不同内容块里的链接样式。类似这样:#nav a:link或者 #main a:link或者#footer a:link。也可以定义...[ 查看全文 ]
  • 标签:Web开发
    和一般的CSS语法不同,CSS伪类的语法有两种。 第一种: selector:pseudo-class {property: value} 也可以用HTML的class属性来设定伪类。 例句: a:link {color:red} 第二种: selector.class:pseudo-class {property: value} 伪类是最常用的伪类。 例句: a.c1:link {color:red} 锚(a)伪类 锚(a)伪类是最常用的伪类。例句如下: a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:vi...[ 查看全文 ]
  • 标签:Web开发
    前面的学习我们仅仅使用HTML选择器(在HTML页面里为html标签,如 P) 现在我们学习使用clss和id定义属于自己的选择器。 这样,同样的html元素可以通过class或ID使用不同的表现。 在CSS里,使用点号(.)创建class选择器,使用hash符号(#)创建ID选择器。 例子: #top {     background-color: #ccc;     padding: 1em } .int...[ 查看全文 ]
  • 标签:Web开发
    英文原文: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ 中文翻译: http://www.dudo.org/article.asp?id=197 注: 本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注] 在2005年的9月和10月,我先后发表了几篇关于CSS2.1中选择符的介绍文章。大体看来...[ 查看全文 ]
  • 标签:Web开发
        我们在设计网站的时候,有的时候需要根据页面元素的属性来制作不同的样式,比如,对于不同的链接类型,显示不同的链接图标。CSS的选择器是个很有用的技术,通过它们,我们可以很容易的实现某些效果。今天我们通过制作个性化链接样式来介绍一下CSS的属性选择器。     先看一下演示吧:       正如上图中看到的那样,我们为每种链接定义了不同的样...[ 查看全文 ]
  • 标签:Web开发
    今天稍稍看了一下IE7对css选择器的改进,出乎我的想象,竟然修复了大部分bug。   1、对伪类的支持。IE6和更低的版本对于伪类的支持仅限于a标签,诸如“:hover”、“:active”、“:focus”之类的伪类理论上是应该适用于所有元素的,但是IE6和更低版本抛弃了它们。这次IE7有选择地支持了“:hover”。   Quotes div:hover {     background-color: #B7B7B7; } 诸位可以试...[ 查看全文 ]
手机页面 收藏网站 回到头部