Chesanqi's Web World

以前对 CSS3 选择器理解的不准确。比如 :first-child 伪类。如果有这么一个代码片段：

1
2
3
4
5

<div>
    <h1></h1>
    <h2></h2>
    <h2></h2>
</div>

给出一个组合选择器

1

div h2:first-child{}

能不能匹配到第一个 h2 呢？
答案是不能。因为 h2 不是 div 元素的第一个子元素。这个伪类选择器只适用于 h2 是第一个子元素的情况，如果 h2 不是第一个子元素，它什么都匹配不到。W3C 官网是这么介绍的：

The :first-child pseudo-class represents an element that is the first child of some other element.

并且明确的给出了两个例子：

This selector can represent the p inside the div of the following fragment:

1 2 3 4

<p> The last P before the note.</p> <div class="note"> <p> The first P inside the note.</p> </div>

but cannot represent the second p in the following fragment:

1 2 3 4 5

<p> The last P before the note.</p> <div class="note"> <h2> Note </h2> <p> The first P inside the note.</p> </div>

去 W3C 官网查看例子

那么，如果想实现匹配不是第一子元素的一组 h2 中的第一个，应该用那个选择器呢？
要用 :first-of-type 伪类。
W3C 官网给出的介绍：

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.

去 W3C 官网查看例子

因为
:first-child 和 :last-child 是 :nth-child() 的特例。
:first-of-type 和 :last-of-type 是 :nth-of-type() 的特例。
所以这几个伪类的用法是一样的。

如果能在IE中实现一些高级的CSS技术，比如CSS3选择器、CSS3多背景、CSS3阴影等。或许就能更好的学习新技术，而不会总感觉那么遥远，总感觉新技术用不上。

写了一个JS。页面中只需引入这个JS，一些高级的CSS技术在IE中同样有效。实现起来很简单，比如选择器（现在只写了选择器 = =），通过JS找到一些高级选择器特有符号（如[] + ~ > *= ^=），把这些样式变成某个类的样式，把这个类名添加到相应的元素标签上。利用 jQuery 找到IE中相应的元素标签。

我找了下网上实现相同功能的办法，都需要一些配置，或者必须得在服务器环境下开发才行。我不是资深的工程师，不想那么麻烦，尽量做到跟平时写静态文件一样。也许这样看起来安全上没那么严谨。同时还有一些问题没解决，比如一些伪类没想好怎么处理。

看一下 demo 吧，共同解决。
点这里是 github 项目地址。

距上次写HTML5过去了好长时间。囧~，人真是懒！
最近内部学习用，修改了一下HTML5演示文档，粘在博客吧，请点击这里（Chrome效果最佳）。

另外粘几个关于HTML5的URLs：
1、The HTML5 test（可以测试各浏览器对HTML5支持情况）
http://www.html5test.com/
2、HTML5设计原理—Jeremy Keith在 Fronteers 2010 上的主题演讲（可以深入理解HTML5的设计思想）
http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html
3、畅游 HTML 5 (Dive Into HTML 5 中文版)（可以找到相关特性的相关说明）
http://www.diveintohtml5.com/
4、HTML5（火狐官方对HTML5的介绍，附有一些教程）
https://developer.mozilla.org/cn/HTML/HTML5

题目当然是模仿的淘宝UED的那本译作《PPK on Javasrcipt》，可惜我说不了那么深刻，只是摆出来供大家探讨。html5和css3现在是个时髦的话题，时髦到现在才写这个都有点过时了。还好爸爸总对我说这么一句话“只要是你没看过的《故事会》，1999年的也是最新的。”

闲话少说，html5新增的一些特性包括：

• 新的特殊内容元素，比如 header、section、nav、article、aside、footer
• 新的表单控件，比如 date、time、email、url、search
• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持

一、新增内容元素的出现，是标准向语义化跨出的一大步。以前我们有一些约定俗成的规矩(点击这里)，比如说

1
2
3
4
5
6
7

<div id="header">页面头部</div>
	<div id="content">
		<div id="nav">导航区域</div>
		<div id="main">主内容区</div>
		<div id="side">侧边栏</div>
	</div>
<div id="footer">页面底部</div>

在html4.01中div是区域划分的最好元素，不夸张的说只用一个div就可以搞定整个页面，所以市面上流行着大量div+css的书，其实div只是html中的一个元素标签，严格来说应该是(x)html+css技术。html5更加强调了标签的语义化，新增header、nav、article、section、footer等内容元素。所以上面的代码片段在html5中比较合理的写法变为：

1
2
3
4
5
6
7

<header>页面头部</header>
	<section>
		<nav>导航区域</nav>
		<article>主内容区</article>
		<aside>侧边栏</aside>
	</section>
<footer>页面底部</footer>

好了，现在不用约定俗成了，现在标准规定了，每个符合标准的浏览器都会知道页面中的每一部分代表什么内容，有什么作用。代码简洁漂亮没有多余重复的div,搜索引擎可以更清楚的判断网页的哪部分内容更重要。事情变的简单，工作效率增加。

但是但是，要注意他们跟h1、P不一样，新增的内容元素不是换了名字有了自己特点的div。尝试这样定义header标签的样式：

1

<header style="width:300px;height:200px;background:red;">页面头部</header>

测试发现在ff、safari、opera中width和height都没有起作用，只有在chrome中才得到想象中的效果。（ie我暂时忽略了，原因不表）新增的内容元素不是div，现在就可以使用这些新内容元素，但有时候要套一个多余的div，比较：

1
2
3

<header  style="width:300px;height:200px;margin:0 auto;">
 内容
</header>

1
2
3

<header>
	<div style="width:300px;height:200px;margin:0 auto;">内容</div>
</header>

———————-
—2010-8-26更新—
粗心了，该打。
header、section、nav、article、aside、footer等新元素更像是span，想表现出块级元素的特征需要设置display=”block”。
———————-
二、新的表单控件,html5新增了许多input输入类型选择：

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

详细了解，请点击这。

以前不借助javascript，实现表单验证功能是不可能的。html5新增的input类型不要javascript就能验证。email可以验证输入是不是email格式；number类型确保输入的是一个数值。这真是振奋人心的新增功能。

但是但是，现在面临最大的推广困难是各浏览器对其的支持，那是相当的不乐观。即使浏览器对标准全面支持，我觉得实际应用起来仍然不那么乐观，因为标准没有规定，当值为true时浏览器应该怎么做，当值为false时浏览器又要怎么做。比如说opera有自己的fasle效果，input底色变红并且出现输入不合法的提示。如果我们想做到各浏览器表现效果一致，恐怕需要一个像css那样的reset.css。