jun-pata/blog

博客，技术记录

blog's Issues

nth-child()用法总结

基本用法

:nth-child(n) //第n个
:nth-last-child(n) //倒数第n个

:nth-child(odd) //奇数项
:nth-child(even) //偶数项

:first-child //第一个
:last-child //最后一个
:only-child //只有一个列表项时的样式

计算用法

:nth-child(an+b)
1、a,b可为正值也可为负值；
2、-b为负值及减法；
3、-a为负值表示，从b开始（包括b）往前匹配a的倍数；

例子：
nth-child(-3n+7){background: #00f;}

组合用法

:first-child:last-child //等同于 :only-child

li:nth-child(n)~li // 第n个li后（包括n）的所有li

例子：
li:nth-child(4n)~li{background: #00f;}

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
/* 当列表正好包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
/* 当列表至少包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
/* 当列表最多包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
/* 当列表包含2～6项时，命中所有列表项 */
}

参考书籍：《css揭秘》

bind()、.live()、.delegate()和.on()之间的区别简介

.bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。
.click() 方法只是.bind() 方法的简写。

$( "#members li a" ).bind( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );

方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）

$( "#members li a" ).live( "click", function( e ) {} );

.delegate() 方法会将选择器和事件信息 ( "li a" & "click" ) 附加到你指定的元素上 ( "#members" )。

$( "#members" ).delegate( "li a", "click", function( e ) {} );

Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用.on()方法一种方式来调用它们

常用工具整理

各种设备的尺寸：http://screensiz.es/

渐变颜色css生成器：http://www.colorzilla.com/gradient-editor/

各浏览器的hack：http://browserhacks.com/

AI人工智能无损图片放大：http://bigjpg.com/

京东任意尺寸图片链接(eg)：https://jdc.jd.com/img/280x280

自定义字体压缩工具（字蛛）：http://font-spider.org/