详细解析HTML5开发移动项目经验谈

4、选择符

选择符大致分为元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符，在PC端，我们用的最多的就是元素选择符、关系选择符和属性选择符如

div{……}、div.class{……}、div#id{……}、div span{……}、div[class="classname"]{}

但是由于ie某些浏览器的原因，很多好用的选择符不能广泛使用，如ie6只支持a标签的伪类选择符，但是在移动端，我们就不用在意这些了，绝大多数选择符都已经可以使用了，如前文已经用到的

.item_list li:first-child{background: #f00}

.item_list li:nth-child(2){margin-left: 10px;background: #ff0;-webkit-box-flex:1;}

.item_list li:last-child{background: #c96}

伪类选择符和伪对象选择符有很多，灵活运用可以减少很多不必要的代码。如E:nth-child(n){ …… }、E:nth-of-type(n){ …… }、E:disabled{ …… }、E:empty{ …… }、E:first-letter/E::first-letter{ …… }、E:first-line/E::first-line{ …… }、E:before/E::before{ ……}、E:after/E::after{…… }、E::selection{ …… }等，这里不细说。

5、一些小的建议

(1)、如何禁止用户旋转设备

这里其实是想告诉你在浏览器里办不到，因为禁止开发者阻止浏览器的orientationchange事件。

(2)、禁用自动识别电话号码

在开发项目的时候，我们经常会用到一些数字或者就是电话号码，但是又不想系统自动识别让用户可以直接拨打，我们只需要在标签之间加入

即可，但是有些特殊情况我们需要可以用户直接拨打，如

没关系，像这样010-52918772即可，系统会自动识别，用户点击即可选择拨号。

(3)盒子边框溢出

当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100%。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。

(4)、ios数字颜色样式超过9位后失控

这个问题我不知道该怎么描述，就是在ios中，当数字超过9位数时，浏览器会给这个数字默认加上一个颜色，无论你设置什么颜色都无效。

(5)、iOS可禁止用户在新窗口打开页面

在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“指定在当前页面打开，但是在iOS中长按链接一段时间后，系统会弹出一个对话框，用户可以通过点击“在新页面中打开”来在新窗口打开页面，这样我们指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮。

(6)、CSS3绘图和CSS3动画

在html5和css3的世界里，很多图片都是多余的，我们可以尽情发挥自己的想象，让CSS3替代不必要的图片不必要的JavaScript，另外做CSS3动画时最好将动画代码提取出来单独命名。

本文前前后后��嗦嗦说了很多，大多都是一笔带过没有细说，因为每一个小点的研究都可以写一篇博文了，我这就不班门弄斧，有兴趣的童鞋就细细研究一番。由于文笔不好加上知识范围有限，如有错误敬请指正，谢谢!