nth-child,nth-last-child,only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child伪类区别和用法
我将这坨伪类分成三组,第一组:nth-child,nth-last-child,only-child第二组:nth-of-type,nth-last-of-type,第三组:first-of-tpye,last-of-type,第四组:first-child,last-child。
==1==
nth-child定义是:其父级的第x个子元素。写法有两种:
p :nth-child(x)
p:nth-child(x)
第一种指的是p的第x个子元素,无需查找,明确指明父级,而子级无论是什么元素都将被选择。
第二种指的是p的父级元素的第x个子元素,此时父级元素并未指定,是该选择器去查询的包含有p元素的父级容器,但此时nth-child选择类型被明确指定了,只能是p元素,因此就会出现从p的父级去查找其子元素的时候,找不到p:nth-child(x)的情况,因为此时是在p的父级元素底下对所有子元素进行索引,x对应的p只有都具备的时候该选择器才能选中元素,换句话说,p的父级下的子元素,只有同时符合既是p元素且索引正好是x,才能被选中。
搞清楚了哈。再说说nth-child括号内可以允许的参数,包括数值,关键词(odd,even)及公式。
数值很好说,就是子元素的索引,该索引不单单指特定元素,而是所有子元素。关键词当然也是子元素的奇偶索引,因为含一个单子元素的情况很多见,因此奇数总是多于偶数比较常见。
公式,an+b,a,b是常数,而n是自然数,也就是0到无穷,变种2n+1,3n+1,-n+7(7以前的数字),而若数字x为n代表所有元素。关于求交并补集,以下两篇博文写的很清楚,不赘述:
http://www.qdfuns.com/notes/17398/84081c84d8c2056c6f4935c3c7fc6bbf:storey-13.html
http://www.qdfuns.com/notes/17398/f5371a84f07992c180561e0272bf800c.html
http://www.qdfuns.com/notes/17398/fa3777cd51a94d7ab30c87bd479a1471.html
nth-last-child跟nth-child一样,一个正序,一个倒序,而only-child指的是仅仅含有某指定元素或者未指定但是只有一个子元素的。
==2==
第二组,first-chlid和last-child,是nth-child(1)和nth-last-child(1)的简写 ,不赘述。
==3==
第三组nth-of-type,nth-last-of-type,last-of-type,first-of-type,only-of-type。
nth-of-type,nth-last-of-type,可以分别从前到后和从后到前选一组,而first-of-type和last-of-type则只能选第一个和最后一个。相对于第一组,它们的区别在于:
p :nth-of-type(1)
p:nth-of-type(1)
前者会选择所有第一次出现的不同子元素的第一个。比如有10个子元素,其中a3个,span2个,p3个,div一个,em一个,则会将a,span和p的第一个选中,div和em也被选中。因此nth-of-type的最佳用途肯定不是这样使用。而第二种用法则会将p的父级元素下的所有子元素种的第一个选中,索引不会计算其他非p元素。
大概就这么多。反正我懂了。其他遇到再说。
nth-child,nth-last-child,only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child伪类区别和用法的更多相关文章
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit
伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 编译函数(大篇幅)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 从Sizzle1.8开始,这是Sizzle的分界线了,引入了编译函数机制 网上基本没有资料细说这个东东的,sizzle引入这 ...
- Jquery 之 使用选择器
jQuery选择器描述 jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的.jQuery 选择器采用CSS ...
- 抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- CSS中的偏僻知识点
一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ - ...
- Child <- many-to-one ->Parent
网上找到个描述的很精妙的例子 Child <- many-to-one ->Parent class Child { private ...
- leetcode Database3(Nth Highest Salary<—>Consecutive Numbers<—>Department Highest Salary)
一.Nth Highest Salary Write a SQL query to get the nth highest salary from the Employee table. +----+ ...
- Codeforces Round #250 (Div. 1) B. The Child and Zoo 并查集
B. The Child and Zoo Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/438/ ...
- Pass value from child popup window to parent page window using JavaScript--reference
Here Mudassar Ahmed Khan has explained how to pass value from child popup window to parent page wind ...
随机推荐
- Navicat Premium_11.2.7简体中文版 破解版本 windows版本
亲测可用 自己一直在用的 https://pan.baidu.com/s/1VVKKQoIKVB0BgNXBK4YTrQ
- 【UNIX环境高级编程】线程同步
当多个线程共享相同的内存时,需要确保每个线程看到一致的数据视图.如果每个线程使用的变量都是其他线程不会读取和修改的,那么就不存在一致性问题.同样,如果变量是只读的也不会有一致性问题.但是,当一个线程可 ...
- wireshark系列之wireshark简介
前言:为什么要学wireshark?工欲善其事必先利其器,wireshark是一款工具软件,主要作用是抓取数据封包,可以帮助我们更加直观更加具象的学习各种网路协议(http.TLS.TCP.UDP.I ...
- MFC中ON_COMMAND,ON_MESSAGE,ON_NOTIFY的区别
原文链接地址:https://blog.csdn.net/sufwei/article/details/3635489 ON_COMMAND //用来响应相应工具栏和菜单栏的命令WM_COMMAND, ...
- 洛谷P4609 [FJOI2016]建筑师 【第一类斯特林数】
题目链接 洛谷P4609 题解 感性理解一下: 一神带\(n\)坑 所以我们只需将除了\(n\)外的\(n - 1\)个元素分成\(A + B - 2\)个集合,每个集合选出最大的在一端,剩余进行排列 ...
- 基于Memcached分布式系统DRDoS拒绝服务攻击技术研究(转)
本次反射式拒绝服务攻击技术基于全球互联网分布式的Memcached服务器,需要储备一定得安全攻防知识,网络协议知识和python代码编程技术.希望在学习本篇文章知识前自行学习相关的基础知识,文章后面同 ...
- bzoj3036: 绿豆蛙的归宿(期望DP)
刷水反被水题日,拓扑写炸WA了2发T T... 因为是DAG图,可以直接递推,不需要高斯消元 #include<iostream> #include<cstring> #inc ...
- 【bzoj4520】K远点对
Portal --> bzoj4520 Description 给你平面内\(n\)个点的坐标,求欧氏距离下第\(k\)远的点对 Solution 因为kd其实..严格来说挺不熟的用的太少了qw ...
- Git 自动补全
如果你用的是 Bash shell,可以试试看 Git 提供的自动补全脚本. http://git-scm.com/download 下载 Git 的源代码,进入contrib/completion ...
- Flash平台的分析与RIA的趋势
10月3号,Flash Player 11 和 AIR 3.0正式提供下载,一片安静.最近这两年来,关于Flash的新闻一向是以负面为主,先是 Silverlight 的挑战,然后是 iphone和i ...