Harde之家

解决label标签在IOS设备上无效的问题

最近一直在做Iphone、Android的Web项目，发现个很让人恼火的问题
本身因为硬件原因，手机的屏幕都比较小，也就导致了radio、checkbox的默认大小，难点的令人发指
那么，label的作用这时就应该体现出来了。当令我意想不到的问题是，在包括Iphone、Ipad、IPod Touch上，label标签竟然无效！！

查了一堆文档，都没有说名这个问题，后来作罢，把checkbox大小做的大一点，修改下外观，并跟客户说明了下情况。这才作罢。
今天偶然在网上看到一篇文章，说label在IOS上是有bug的，只要添加个onclick=”"就恢复正常了。果断试了下，竟然真的好了~~
完整代码;

1
2

<label for="ckb_user" onclick="">我是演示</label>
<input id="ckb_user" type="checkbox" value="0" />

参考文章:《使iPhone Safari的label元素生效》
http://www.keakon.net/2011/01/20/%E4%BD%BFiPhoneSafari%E7%9A%84label%E5%85%83%E7%B4%A0%E7%94%9F%E6%95%88

CSS3 nth-child 伪类用法

做爱疯和安卓的项目，觉得JqueryMobile太过于臃肿，于是废弃，不过JqueryMobile的UI还是比较耐看的，于是提取了不少样式来用。
其中用的最多的就是ul、li列表，不过JQM的样式写的太过于臃肿，而且还要嵌套一堆div，于是又弃用了JQM的样式…….

废话不多说，正式开始~~

隔行效果一直是比较难受的东西，不是说有多复杂，而是总是配合着JS或者后台代码太过于恶心…
CSS3 中提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。

今天我们来说说nth-child
nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素，可以使用an+b的形式选择子元素，举例用法如下：

1
2
3
4

ul.demo1 li:nth-child(3){
	color: green;
	background-color:black;
}

效果

• 测试1
• 测试2
• 测试3
• 测试4

在nth-child的括号中，可以填写：
odd代表单数,even代表双数行
也可以在里面书写包含字母n的方程式
比如
tr:nth-child(2n+1) 效果同 tr:nth-child(odd) 表示单数行
tr:nth-child(2n) 效果同 tr:nth-child(even) 表示双数行
有一点要注意(-n)比较特殊，无论n为多少(-n+x)的值必须为正数才有效，例如
tr:nth-child(-n+3)，那么实际效果就是前3行被选中。
由此，咱么可以实现点特殊的效果

1
2
3
4
5
6
7
8
9
10
11
12

ul.demo2 li:nth-child(odd){
	color: #aaa;
	background-color:#444;
}
ul.demo2 li:nth-child(even){
	color: #222;
	background-color:#ccc;
}
ul.demo2 li:nth-child(-n+3){
	color: #fff;
	background-color:#000;
}

• 测试1
• 测试2
• 测试3
• 测试4
• 测试5
• 测试6
• 测试7
• 测试8

nth-child伪类的衍生
除了nth-child以外，W3C还为我们提供了几个基于nth-child定义的衍生伪类，这里简单地说说他们的用途。

E:nth-last-child(n): 选择某个子元素，从最后一个数起
E:nth-of-type(n): 选择某个某种类型的子元素
E:nth-last-of-type(n): 选择某个某种类型的子元素，从最后一个符合条件的元素数起
E:first-child: 选择第一个子元素（这个伪类在CSS2里就有）
E:last-child: 选择最后一个子元素

好了，相信大家都是很聪明的，我就不多说了，最后提醒一下，大家不要被文章的例子限制死了，要灵活运用。我送给大家一个Table~

01	02	03	04	05
11	12	13	14	15
21	22	23	24	25
31	32	33	34	35
41	42	43	44	45
51	52	53	54	55