今天睡到了自然醒，起床之后老婆非要拉着出去逛逛。正中我的下怀，朕正有此意！于是收拾一下就牵着媳妇儿的手点上一根烟打个公交就奔着公园冲了过去。因为是周末人还挺多，看来我今天的决定是对的，好多黑丝美女啊。看的我的口水都快飞出来了。哈哈哈哈~ 来上一张福利图撩拨下心弦~~

beautyleg黑丝美女

很养眼不是么？估计有人会说这有啥好看的，不做评价，我只想陈述下我的一个观点“有故事的男人都会欣赏穿着黑色丝袜的女人”。突然间脑洞大开，如果我真的穿越回古代并成为君王，嘿嘿嘿~ 每天晚上会很精彩啊。不过也不好，古代没有黑丝，还是现代好。这样吧，如果我是超级土豪，弄上几十个超级嫩模，买下一个岛，全TM给我穿上黑丝，老子要玩个遍~

咳咳~还是有点节操的好。如果真是有几个黑丝妹子侍寝的话，这个排序就有问题了。排序？嗯冒泡排序和归并排序都是……我艹怎么说到算法了，我是前端啊，要从前端的角度去考虑问题。如何选择她们中的某位或某几位“侍寝”这个任务需要怎么弄？估计每天都会在这样的问题中烦躁不已吧。

属性选择器是个不错的方案，我先给她们……呸呸_{！我是有钱人呐} 有钱人就应该任性啊，什么罩杯啊、腿长啊、脸型啊、肤色啊，我没那个闲功夫去标识每一个妹子。让她们在我面前站一排，点到几号就是几号。不搞那么多弯弯绕，简单粗暴的伪类:nth-child直接搞定。如果对伪类和伪元素的区别不是很明白的，猛戳后面的链接>>>>>《伪类与伪元素，傻傻分不清楚》。

来来~ 来都站我面前，我要开始点号了啊~ 比如我选中了三号！来吧，跟朕去寝宫~

nth-child选择器实例01

真方便啊~指哪打哪，没有误差。好的很，如果这个时候在一群黑丝妹子中间混入了一个肉丝妹子，偶尔换换口味还是不错的，朕就勉为其难的选一下吧，继续伪类:nth-child来选择，来看图。

nth-child选择器实例02

我擦类这是要造反了啊，没有反应？竟然不听我的话了。我觉得此刻的心情是沉重的，刚刚晋升超级土豪的优越感瞬间土崩瓦解。这个故事告诉我们一定要好好学习，工具一定要运用熟练，不然妹子都不跟你走啊~ 当然我们手里面还有一个和其功能类似的:nth-of-type可以使用，为了不重蹈丢脸的覆辙，还是潜心研究下的好。安全第一~~

要说:nth-child和:nth-of-type这俩位，还真是有点小差异。我写了一个DEMO，可以通过实验来感受下，这俩伪类是个啥情况>>>>>>《nth-child和nth-of-type实验》。

和刚才的情况一样，当我用:nth-child(3)的时候所有的“妹子”——<li>和<p>都没有反应。

nth-child选择器实例02

当我用:nth-child(4)的时候第三个“黑丝妹子”——<li>产生了反应。

nth-child选择器实例03

需要注意的是这第三个“黑丝妹子”同时又是“妹子队列”——<ul>当中的第四个“妹子”。下面迫不及待的要用:nth-of-type来试验下了，:nth-of-type(3)的情况如下。

nth-of-type选择器实例01

:nth-of-type(3)直接选中了第三个“黑丝妹子”——<li>，而通过点击DEMO中单选框能看到当:nth-of-type(2)的时候选中的是第二个“黑丝妹子”——<li>，这家伙直接把<p>给隔了过去，太任性了，看都不看一眼，直接跳过！相信看到这里，对:nth-child和:nth-of-type已经是一目了然了。

伪类li:nth-child(×)：选中第×个并且同时是“黑丝”——li的元素。如果第×个不是“黑丝”——li则视为“未选中”。

伪类li:nth-of-type(×)：选中第×个“黑丝”——li元素，并不考虑同级中是否有其他元素。

其实从这俩伪类的名字就可以看出端倪，child就是指子元素，type就是类型。从选择方式上看child比type的条件更严格一点。啊哈~~！这俩货也不过如此……just so easy!!!

最后值得提一嘴的是，上面例子中如果想选择“肉丝”——<p>的话，则有多种写法。我全部列出来，建议你先想一想再往下面看，看看你想的和我所想的是不是一样。

。
。
。
。
。
。
。
。
。
。
。
。

ul p:nth-child(3){ color:red;}
 
ul p:nth-of-type(1){ color:red;}
 
ul *:nth-child(3){ color:red;}
 
ul *:nth-of-type(3){ color:red;}

建议自己敲下代码来亲自验证下……

:nth-child()和:nth-of-type()里面填写的数字叫匹配子元素的下标，第一个子元素的下标是1，以此类推。，这是很“耿直的”一种方式。括号里面说是几就是第几，写1就是第一，写2就是第二。你也可以填写0，不过下标为0的子元素是不存在的，所以匹配不上不会生效。这个和数组的概念不一样，数组中的下标是从零开始的。不过按照IT圈的尿性理论上应该还有两个“逆行”伪类与之对应才对。如果考虑到这点了，我就预先恭喜你在技术细节的积累上打了一个漂亮的“擦边球”，走了点捷径来提升效率。:nth-child()对应的就是:nth-last-child()；:nth-of-type()对应的就是:nth-last-of-type()。如果你在这两个伪类的括号里面的数字你写了阿拉伯数字1，那么就是倒数第一个的意思。是不是很带感？！

现在我们一下子掌握了四个伪类:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()。要知道伪类的数量不是太多，这下子进步的尺度有点微大啊。先别得意的说，“世间万物有一利必有一弊”。这几个伪类的弊端就是不能同时主观的去指定任意多个数。什么叫“主观的”指定任意多个数呢？就是说:nth-child(3,8,100)这种形式是无效的，没有任何作用的，属于“违法”的。想这样写的洗洗睡吧~！不信的自己敲代码看看……我懒的在这种错误中浪费时间，所以不贴代码了。

是不是有点失望？没关系我们的伪类带有()，这就说明了一些问题，具体是什么问题呢？我抽根烟之后再来传授装逼绝学——！！！

进入极限装逼模式

好了，继续进行。在编程中带()的几乎都是函数，括号里面就是参数。我们前面的例子中写的阿拉伯数字就是参数。但是上面也说了这种参数的形式不能是“主观的”指定任意多个数。那么关于这个伪类的括号里面到底能写上一些什么呢？还是老方式——查资料，敲代码。

就常用的方式来说有两种形式：一种是固定的英文参数。估计一提英文很多英语不是很好的人会头大，不要紧英文参数只有两个，分别是odd奇数和even偶数，你可能会说我记不清楚到底那个代表了奇数啊，简单~记住“基地”这个词，也就等于记住了“奇数是odd”。eg::nth-child(odd)就是选择所有下标为奇数的子元素。

第二种方式就是表达式。比如填写n，n是大于等于零的整数。例如:nth-child(n)就是从下标为零的元素开始逐一匹配直到最后一个子元素。2n就是代表偶数下标相当于even；2n+1代表所有的奇数下标就相当于odd。

是时候展现你数学功底的时候了……看看你能脑洞开到什么程度，如果数学公式利用的很666，那么用这几个伪类肯定能作出非常惊艳的效果。怎么使用还是要看自己的想象力。

另外文档中说参数n可以是数字、关键词或公式。数字和公式都好理解，这个关键词是什么个意思，没有搞明白。做了半天实验，也不知道是什么的关键词，如果有人知道麻烦告诉我一声，感激不尽！！~~拉臭臭的时候脑子不知道怎么了就转到了这俩伪类上了，突然意识到关键词其实就是上一段文字中说的odd/even，瞬间觉得自己好low!

我不写了，因为这会儿“翔意十足”，扛不住要去拉臭臭~~~888

签名