结构性伪类选择器—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)的更多相关文章

  1. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  2. CSS3 结构性伪类选择器(2)

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

  3. CSS3 结构性伪类选择器(1)

    1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...

  4. css3 结构性伪类选择器

    伪类 选择器 类型 说明 备注 E:first-line 伪元素选择器 选择匹配E元素内的第一行文本 E:first-letter 伪元素选择器 选择匹配E元素内的第一个字符 E:before 伪元素 ...

  5. css3结构性伪类选择器

  6. h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target

    root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...

  7. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  8. 【CSS3】---结构性伪类选择器-first-child+last-child

    结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...

  9. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

随机推荐

  1. Ehcache(08)——可阻塞的Cache——BlockingCache

    http://haohaoxuexi.iteye.com/blog/2119737 可阻塞的Cache—BlockingCache 在上一节我们提到了显示使用Ehcache锁的问题,其实我们还可以隐式 ...

  2. Android中GridView的实现实例

    实现效果: activity文件代码: package com.tmacsky; import android.app.Activity; import android.os.Bundle; impo ...

  3. Android Studio Push rejected: Push to origin/Alpha1.0 was rejected

    android studio git 右键项目, git pull 刷新选择Alpha1.0同步后,再commit and push

  4. X431 元征诊断枪

    X-431 Diagun是专门为汽车维修技师设计的诊断设备. 小巧的主机.强大的诊断功能.方便快捷的网上升级.一体化多功能接头,都是维修技师的首选.X-431 Diagun 是汽车维修技师的标准装备. ...

  5. PL/pgSQL函数带output参数例子

    例子1,不带returns : [postgres@cnrd56 bin]$ ./psql psql () Type "help" for help. postgres=# CRE ...

  6. PS-添加前景色

    alt+Delete是填充前景色,即ps左边两个颜色块,前面的那个 ctrl+delete填充背景色

  7. 有用好看的CSS+JS+table 导航

    预览效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dis ...

  8. Android图片适配,drawable文件夹,低分辨率图片是否必要

    我们知道,Android提供了几种不同分辨率的bitmap,来对应不同手机屏幕的密度.对应关系如下: xxhdpi:3.0 xhdpi: 2.0 hdpi: 1.5 mdpi: 1.0 ldpi: 0 ...

  9. Android 实现自动接听和挂断电话功能

    添加权限 <uses-permission android:name="android.permission.CALL_PHONE"/> <uses-permis ...

  10. 即时通信(RPC)的Rtmp实现--配置篇

    http://flexman.blog.sohu.com/129838570.html http://flexman.blog.sohu.com/130007574.html step 1: 首先要确 ...