CSS3的一个伪类选择器“:nth-child()”。
语法:
:nth-child(an+b)
第一种:简单数字序号写法
:nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
例子:
li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
第二种:倍数写法
:nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
例子:
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三种:倍数分组匹配
:nth-child(an+b) 与 :nth-child(an-b)
先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)
例子:
li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/
第四种:反向倍数分组匹配
:nth-child(-an+b)
此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。
例子:
li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/
第五种:奇偶匹配
:nth-child(odd) 与 :nth-child(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。
CSS3的一个伪类选择器“:target”。
如何使用:target
:target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的:
selector:target{
color:red;
/*other styles*/
}
实例
让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab,之前我们要用脚本来实现,YUI、jQuery也都有这样的插件或者模块,但是现在我们用:target伪类就可以实现。
HTML结构:
<ul class="tabs">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">
<!--tabed content--></div>
<div id="tab2" class="tab_content">
<!--tabed content--></div>
<div id="tab3" class="tab_content">
<!--tabed content--></div>
CSS3代码:
/*layout styles*/
.tab_content {
position: absolute;/*set content box as absolute*/
/*other layout styles*/
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
分享到:
相关推荐
CSS3伪类选择器 E:root 根选择器,它的意思是匹配元素E所在文档的根元素,在HTML文档中,根元素始终是 E:not 否定选择器,它和JQuery中的:not选择器一模一样,可以选择除某个元素以外的元素, E:first-child 第...
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari...
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
如果说 css 作为前端开发的基本功, 那么 选择器 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们: ...
伪类选择器 提升你的CSS技能:深入理解伪类选择器和伪元素选择器
首先,CSS3引入了多种伪类选择器,它们能够帮助我们更精确地控制元素在不同状态下的样式。在这个案例中,可能会用到以下几种常见的伪类: 1. `:before` 和 `:after`: 这两个伪元素可以在元素的内容前面或后面插入...
伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active` 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是...
伪类选择器的使用和语法 摘要:本文将详细介绍伪类选择器的使用和语法,包括伪类选择器的作用、语法、案例演示和注意事项等。 一、伪类选择器的作用 伪类选择器是一种特殊的选择器,...* CSS-Tricks - 伪类选择器
在本章中,我们将深入探讨UI元素状态伪类选择器这一关键CSS概念,它是构建响应式和交互式用户界面的核心工具。伪类选择器允许我们根据元素的不同状态来应用特定的样式,使得网页的视觉反馈更加直观和动态。 首先,...
CSS3 中的 `:before` 和 `:after` 伪元素选择器提供了这样的功能。 1. `:before` 选择器: `:before` 伪元素选择器允许我们在元素的内容前面插入内容。例如,如果我们想在一个段落前添加一个引号,可以这样编写CSS...
一、X:nth-child(n) ...demo的用法是最简单的,X:nth-child()更强大的用处在于奇偶匹配,明河不展开讲,有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
通过使用选择器(如类选择器、ID选择器和伪类选择器),可以精确控制各个元素的样式,包括颜色、字体、布局等。CSS3的过渡(transition)和动画(animation)效果可以使选择过程更加平滑,比如在用户点击城市时添加...
【标题】"纯CSS3剪刀剪纸动画特效.zip"所涉及的知识点主要集中在CSS3这一领域,特别是CSS3的动画(Animations)和过渡(Transitions)特性,以及可能用到的伪类选择器和变换(Transforms)功能。这个压缩包文件很...
在CSS选择器的体系中,存在多种不同类型的选择器,每种都有其特定的用途和使用场景。 首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中...
下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
CSS3引入了更多的伪类选择器,如`:checked`,`:disabled`,`:hover`等,它们可以帮助我们针对不同状态的单选按钮和复选按钮应用不同的样式。例如,`:checked`用于选中的按钮,`:hover`用于鼠标悬停时的效果,`:...
html,css,js,jquery,bootstrap,ajax,echart,vue,es6 伪类选择器 伪类选择器 伪类选择器 伪类选择器 伪类选择器