不明白html 5 的CSS3选择器中的:first-child和:last-child是干什么用的？

:first-child和:last-child

用来选择某个元素的第一个子元素。

//输入ul li:first-child

//输入ul li:last-child

刚刚有个这方面的视频，视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的，有机会看看吧

基础知识

1) 什么是”Last-Modified”?

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间，格式类似这样：

Last-Modified: Fri, 12 May 2006 18:53:33 GMT

客户端第二次请求此URL时，根据 HTTP 协议的规定，浏览器会向服务器传送 If-Modified-Since 报头，询问该时间之后文件是否有被修改过：

If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT

如果服务器端的资源没有变化，则自动返回 HTTP 304 （Not

Changed.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而

保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

2) 什么是”Etag”?

HTTP 协议规格说明定义ETag为“被请求变量的实体值” （参见 —— 章节 14.19）。

另一种说法是，ETag是一个可以与Web资源关联的记号（token）。典型的Web资源可以一个Web页，但也可能是JSON或XML文档。服务器单

独负责判断记号是什么及其含义，并在HTTP响应头中将其传送到客户端，以下是服务器端返回的格式：

ETag: "50b1c1d4f775c61:df3"

客户端的查询更新格式是这样的：

If-None-Match: W/"50b1c1d4f775c61:df3"

如果ETag没改变，则返回状态304然后不返回，这也和Last-Modified一样。本人测试Etag主要在断点下载时比较有用。

Last-Modified和Etags如何帮助提高性能?

聪明的开发者会把Last-Modified

和ETags请求的http报头一起使用，这样可利用客户端（例如浏览器）的缓存。因为服务器首先产生

Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客

户端）缓存。

过程如下:

1,客户端请求一个页面（A）。

2,服务器返回页面A，并在给A加上一个Last-Modified/ETag。

3,客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。

4,客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。

5,服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。

------------------------------------------------------------------------------------------------

正确使用Etag和Expires标识处理，可以使得页面更加有效被Cache。

在客户端通过浏览器发出第一次请求某一个URL时，根据 HTTP 协议的规定，浏览器会向服务器传送报头(Http Request

Header)，服务器端响应同时记录相关属性标记(Http Reponse Header)，服务器端的返回状态会是200，格式类似如下：

HTTP/1.1 200 OK

Date: Tue, 03 Mar 2009 04:58:40 GMT

Content-Type: image/jpeg

Content-Length: 83185

Last-Modified: Mon, 22 Nov 2010 16:29:24 GMT

Cache-Control: max-age=2592000

Expires: Thu, 02 Apr 2009 05:14:08 GMT

Etag: "xok.la-961AA72-4CEA99B4415628″客户端第二次请求此URL时，根据 HTTP

协议的规定，浏览器会向服务器传送报头(Http Request

Header)，服务器端响应并记录相关记录属性标记文件没有发生改动,服务器端返回304，直接从缓存中读取：

HTTP/1.x 304 Not Modified

Date: Tue, 03 Mar 2009 05:03:56 GMT

Content-Type: image/jpeg

Content-Length: 83185

Last-Modified: Mon, 22 Nov 2010 16:29:24 GMT

Cache-Control: max-age=2592000

Expires: Thu, 02 Apr 2009 05:14:08 GMT

Etag: "xok.la-961AA72-4CEA99B4415628″其中Last-Modified、Expires和Etag是标记页面缓存标识

一、Last-Modified、Expires和Etag相关工作原理

1、Last-Modified

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记 (Http Reponse Header)此文件在服务期端最后被修改的时间，格式类似这样：

Last-Modified: Mon, 22 Nov 2010 16:29:24 GMT客户端第二次请求此URL时，根据 HTTP

协议的规定，浏览器会向服务器传送 If-Modified-Since 报头(Http Request

Header)，询问该时间之后文件是否有被修改过：

If-Modified-Since: Mon, 22 Nov 2010 16:29:24 GMT如果服务器端的资源没有变化，则自动返回 HTTP

304

（NotChanged.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类

似。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

注：如果If-Modified-Since的时间比服务器当前时间(当前的请求时间request_time)还晚，会认为是个非法请求

2、Etag工作原理

HTTP 协议规格说明定义ETag为”被请求变量的实体标记” （参见14.19）。简单点即服务器响应时给请求URL标记，并在HTTP响应头中将其传送到客户端，类似服务器端返回的格式：

Etag: "xok.la-961AA72-4CEA99B4415628″客户端的查询更新格式是这样的：

If-None-Match: "xok.la-961AA72-4CEA99B4415628″如果ETag没改变，则返回状态304。

即:在客户端发出请求 后，Http Reponse Header中包含 Etag: “xok.la-961AA72-4CEA99B4415628″

标识，等于告诉Client端，你拿到的这个的资源有表示

ID：xok.la-961AA72-4CEA99B4415628。当下次需要发Request索要同一个

URI的时候，浏览器同时发出一个If-None-Match报头( Http

RequestHeader)此时包头中信息包含上次访问得到的Etag: “xok.la-961AA72-4CEA99B4415628″标识。

If-None-Match:

"xok.la-961AA72-4CEA99B4415628",这样，Client端等于Cache了两份，服务器端就会比对2者的etag。如果

If- None-Match为False，不返回200，返回304 (Not Modified) Response。

3、Expires

给出的 日期/时间后，被响应认为是过时。如Expires: Thu, 02 Apr 2009 05:14:08 GMT

需和Last-Modified结合使用。用于控制请求文件的有效时间，当请求数据在有效期内时客 户端浏览器从缓存请求数据而不是服务器端. 当缓存中数据失效或过期，才决定从服务器更新数据。

4、Last-Modified和Expires

Last-

Modified标识能够节省一点带宽，但是还是逃不掉发一个HTTP请求出去，而且要和Expires一起用。而Expires标识却使得浏览器干脆连

HTTP请求都不用发，比如当用户F5或者点击Refresh按钮的时候就算对于有Expires的URI，一样也会发一个HTTP请求出去，所

以，Last-Modified还是要用的，而 且要和Expires一起用。

5、 Etag和Expires

如果服务器端同时设置了 Etag和Expires 时，Etag原理同样，即与Last-Modified/Etag对应的HttpRequest

Header:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和WebServer发出的

Last-Modified,Etag值完全一样；在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和

Etag之后，服务器才能返回304.

6、Last-Modified和Etag

Last-Modified 和ETags请求的http报头一起使用，服务器首先产生 Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改，来决定文件是否继续缓存

过程如下:

1. 客户端请求一个页面（A）。

2. 服务器返回页面A，并在给A加上一个Last-Modified/ETag。

3. 客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。

4. 客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。

5. 服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。

注：

1、Last- Modified和Etag头都是由Web Server发出的Http Reponse Header，Web Server应该同时支持这两种头。

2、Web Server发送完Last-Modified/Etag头给客户端后，客户端会缓存这些头；

3、客户端再次发起相同页面的请求时，将分别发送与Last-Modified/Etag对应的Http

RequestHeader:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和

WebServer发出的Last-Modified,Etag值完全一样；

4、 通过上述值到服务器端检查，判断文件是否继续缓存；

更多内容参见：http://blog.csdn.net/21aspnet/article/details/6604805

last与break的区别：

last： 停止当前这个请求，并根据rewrite匹配的规则重新发起一个请求。新请求又从第一阶段开始执行…

break：相对last，break并不会重新发起一个请求，只是跳过当前的rewrite阶段，并执行本请求后续的执行阶段…

举一个例子：

server {

listen 80 default_server

server_name dcshi.com

root www

location /break/ {

rewrite ^/break/(.*) /test/$1 break

echo "break page"

}

location /last/ {

rewrite ^/last/(.*) /test/$1 last

echo "last page"

}

location /test/ {

echo "test page"

}

}

请求:http://dcshi.com/break/***

输出: break page

分析：正如上面讨论所说，break是跳过当前请求的rewrite阶段，并继续执行本请求的其他阶段，很明显，对于/foo 对应的content阶段的输出为 echo “break page”(content阶段，可以简单理解为产生数据输出的阶段，如返回静态页面内容也是在content阶段；echo指令也是运行在content阶段，一般情况下content阶段只能对应一个输出指令，如同一个location配置两个echo，最终只会有一个echo指令被执行)；当然如果你把/break/里的echo 指令注释，然后再次访问/break/xx会报404，这也跟我们预期一样：虽然/break/xx被重定向到/test/xx,但是break指令不会重新开启一个新的请求继续匹配，所以nginx是不会匹配到下面的/test/这个location；在echo指令被注释的情况下，/break/ 这location里只能执行nginx默认的content指令，即尝试找/test/xx这个html页面并输出起内容，事实上，这个页面不存在，所以会报404的错误。

---