【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
结构性伪类选择器—nth-child(n)
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。如下表所示:
案例演示
通过“:nth-child(n)”选择器,并且参数使用表达式“2n”,将偶数行列表背景色设置为橙色。
HTML代码:
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ol>
CSS代码:
ol > li:nth-child(2n){
background: orange;
}
//奇数传(2n+1)
演示结果:
结构性伪类选择器—nth-last-child(n)
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。
案例演示
选择列表中倒数第五个列表项,将其背景设置为橙色。
HTML代码:
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
</ol>
CSS代码:
ol > li:nth-last-child(5){
background: orange;
}
//选择列表中倒数第5个元素
演示结果:
【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)的更多相关文章
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- CSS3 结构性伪类选择器(2)
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
- CSS3 结构性伪类选择器(1)
1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...
- css3 结构性伪类选择器
伪类 选择器 类型 说明 备注 E:first-line 伪元素选择器 选择匹配E元素内的第一行文本 E:first-letter 伪元素选择器 选择匹配E元素内的第一个字符 E:before 伪元素 ...
- css3结构性伪类选择器
- h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target
root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- 【CSS3】---结构性伪类选择器-first-child+last-child
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
随机推荐
- Ehcache(08)——可阻塞的Cache——BlockingCache
http://haohaoxuexi.iteye.com/blog/2119737 可阻塞的Cache—BlockingCache 在上一节我们提到了显示使用Ehcache锁的问题,其实我们还可以隐式 ...
- Android中GridView的实现实例
实现效果: activity文件代码: package com.tmacsky; import android.app.Activity; import android.os.Bundle; impo ...
- Android Studio Push rejected: Push to origin/Alpha1.0 was rejected
android studio git 右键项目, git pull 刷新选择Alpha1.0同步后,再commit and push
- X431 元征诊断枪
X-431 Diagun是专门为汽车维修技师设计的诊断设备. 小巧的主机.强大的诊断功能.方便快捷的网上升级.一体化多功能接头,都是维修技师的首选.X-431 Diagun 是汽车维修技师的标准装备. ...
- PL/pgSQL函数带output参数例子
例子1,不带returns : [postgres@cnrd56 bin]$ ./psql psql () Type "help" for help. postgres=# CRE ...
- PS-添加前景色
alt+Delete是填充前景色,即ps左边两个颜色块,前面的那个 ctrl+delete填充背景色
- 有用好看的CSS+JS+table 导航
预览效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dis ...
- Android图片适配,drawable文件夹,低分辨率图片是否必要
我们知道,Android提供了几种不同分辨率的bitmap,来对应不同手机屏幕的密度.对应关系如下: xxhdpi:3.0 xhdpi: 2.0 hdpi: 1.5 mdpi: 1.0 ldpi: 0 ...
- Android 实现自动接听和挂断电话功能
添加权限 <uses-permission android:name="android.permission.CALL_PHONE"/> <uses-permis ...
- 即时通信(RPC)的Rtmp实现--配置篇
http://flexman.blog.sohu.com/129838570.html http://flexman.blog.sohu.com/130007574.html step 1: 首先要确 ...