CSS3之 :nth-child(n)语法讲解
语法:
E:nth-child(n){ sRules }
* 匹配父元素索引为n的子元素E
:nth-child(n) 让你匹配到父元素的任一子元素:
Figure 1:
<section id="demo">
<h1>选取ul第一个子元素li</h1>
<ul>
<li>如果我是红色,说明你的选择到了我,浏览器还颇为先进</li>
<li>落后的浏览器</li>
<li>落后的浏览器</li>
<li>落后的浏览器... #demo li:nth-child(1){
color:#f00;
}
* 除lte IE8浏览器外,你都能看到第一个li被匹配到,且文本为红色;
重点:匹配到的是父元素的子元素:
Figure 2:
<section id="demo">
<h1>选取#demo第一个子元素p</h1>
<p>如果你以为我会被选中变红,那你就猜错了</p>
<p>落后的浏览器</p>
<p>落后的浏览器</p>
<p>落后的浏览器... #demo p:nth-child(1){
color:#f00;
}
* 上诉代码是不是让你感觉第一p元素会被匹配到?如果你真这么想,那你就真的错了,这里没有任何一个元素会被匹配到;
Figure 3:
#demo p:nth-child(2){
color:#f00;
}
* 将Figure #2中的CSS伪类 #demo p:nth-child(1) 改成 #demo p:nth-child(2) 你会发现第一个p才被选中变红,why? 不急,我们再往下看看;
Figure 4:
#demo :nth-child(2){
color:#f00;
}
* 我们再将Figure #3中的CSS伪类 #demo p:nth-child(2) 改成 #demo :nth-child(2) ,把p tag从选择器中去除,你会发现第一个p同样被选中变红。貌似这个才是能符合我们正常思维的,因为第1个p是#demo的第二个子元素;也就是说在本 DEMO 中 #demo p:nth-child(2) 与 #demo :nth-child(2) 是等价的;
* 你觉得这难理解么?CSS选择器是从右到左查询的,我猜你已经知道了这个。E:nth-child(n) 表示的是匹配父元素第2个子元素,如果第2个子元素正好是E,则被匹配到;
* 相信现在 Figure #2 为什么没有任何元素被选中,你已经可以理解了。因为#demo的第一个子元素并不是p,而是一个h1,所以这个选择器是无效的;
* 而 Figure #3 选择器 #demo p:nth-child(2) 表示匹配 #demo 的第2个子元素p,此时 #demo 的第2个子元素正好是一个p,所以被匹配到;
* 相对于 Figure #2 和 Figure #3,本例中的 #demo :nth-child(2) 表示直接选择 #demo 第2个子元素,不论这个子元素是任何标签,都将被匹配到;
CSS3之 :nth-child(n)语法讲解的更多相关文章
- Verilog HDL基础语法讲解之模块代码基本结构
Verilog HDL基础语法讲解之模块代码基本结构 本章主要讲解Verilog基础语法的内容,文章以一个最简单的例子"二选一多路器"来引入一个最简单的Verilog设计文件的 ...
- PID控制器的数字实现及C语法讲解
PID控制器的数字实现及C语法讲解 概述 为方便学习与交流,根据自己的理解与经验写了这份教程,有错误之处请各位读者予以指出,具体包含以下三部分内容: (1) PID数字化的推导过程(实质:微积分的近 ...
- Markdown语法讲解及MWeb使用教程
写了一个月的博客,忽然感觉Markdown编辑器比较好用,于是就下载了一个本地的Markdown编辑软件学习了一下,刚好软件里自带了一篇英文的指示文档,顺便翻译了一下,通过这个过程也大致熟悉了Mark ...
- innobackupex 相关语法讲解【转】
innobackupex 相关语法讲解 连接服务器 The database user used to connect to the server and its password are speci ...
- Elasticsearch基本CURD操作语法讲解
当我们的ES集群搭建完成以后,我怎么能看到集群中各个节点状态以及主节点和健康情况呢,如下讲解使用curl命令来与ES集群进行交互.分别有查询主节点情况.集群状态.以及创建索引查看索引.查看分片以及对E ...
- 9.12/ css3拓展、js基础语法、程序基本知识、数据类型、运算符表达方式、语句知识点
css3拓展: <display:none> 将某个元素隐藏 <visibility:hidden> 也是将某个元素隐藏 <display:block&g ...
- Lua基础语法讲解
Lua 是什么? Lua 是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua 是巴西里约热内卢天主教大学( ...
- mvc 4 razor语法讲解和使用
1.这里的 @{Layout="文件路径";} 代码块指定了整个项目默认所使用的布局文件(如图:) @RenderBody()对于所有的页面默认的情况下都会使用这个布局(Web ...
- C#核心语法讲解-泛型(详细讲解泛型方法、泛型类、泛型接口、泛型约束,了解协变逆变)
泛型(generic)是C#语言2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确定一个或多个具 ...
随机推荐
- Python2和Python3共存,pip共存
使用python开发,环境有Python2和 python3 两种,有时候需要两种环境切换使用,下面提供详细教程一份. 1.下载python3和python2 进入python官网,链接https:/ ...
- MIT 黑科技:通过脑电波和手势控制机器人
简评:麻省理工黑科技,虽然现在能实现的操作还很简单,但前景(想象空间)非常巨大. 通常,控制机器人并不容易,常规手段就是编程.但是地球上从来不缺天马行空的科学家,今日 MIT 的计算机科学与人工智能实 ...
- cap-insets
原文链接 在很多编程语言中都有resizable image这样的概念,比如android中的NinePatch graphic ,css3中的border image,微软的Nine-Grid Re ...
- python-json.loads()保持原json字符串的顺序
import jsonfrom collections import OrderedDictmetadata = json.loads(text, object_pairs_hook=OrderedD ...
- Lecture notes of Mathematical analysis
Lecture notes of Mathematical analysis Preliminary theory Teaching purpose: Mathematical analysis is ...
- 洛谷 P3227 [HNOI2013]切糕(最小割)
题解 Dinic求最小割 题目其实就是求最小的代价使得每个纵轴被分成两部分 最小割!!! 我们把每个点抽象成一条边,一个纵轴就是一条\(S-T\)的路径 但是题目要求\(|f(x,y)-f(x',y' ...
- nginx(三)-动静分离
什么叫动静分离 所谓动静分离就是说我们的图片,css,js之类的文件都交给nginx来处理,nginx处理不了的,比如jsp就交给tomcat来处理. 有人计算过,nginx代理处理静态请求远远优于t ...
- idea 修改jar包源码的编码
项目中有些老的jar不是utf8打包的,中文显示乱码 打开的文件上直接右键, 修改只读jar的源码 自己写的文件可以在右下角修改编码,只读文件就要用上面的方法了
- javascript 正则表达式校验方式写法
if(/[0-9]/.test(value)){return true; } if(/[a-z]/.test(value)){return true; } if(/[A-Z]/.test(value) ...
- linux vi文本编辑器三种模式切换及常用操作
初学者刚进入vi不要乱点键盘,vi的三种模式和各种命令很容易弄混@@ vi编辑器是Unix系统最初的编辑器.它使用控制台图形模式来模拟文本编辑窗口,允许查看文件中的行.在文件中移动.插入.编辑和替换文 ...