Gowhich

Durban's Blog

用node.js建博客(一) - node.js安装及Express框架简介

技术准备:

node.js 写本文的时候我采用的版本是0.4.5, Win用户需要自行编译node.exe
npm 类似Ruby中的RubyGems, node.js包依赖管理工具
express 类似Ruby中的Sinatra, 一个简单的Web框架
markdown.js node.js中的markdown解析器, 什么是markdown?? 用过GitHub的朋友应该知道,readme.md文件
prettify.js google-code-prettify, 提供在线的语法高亮支持,支持语法包括C-like, Java, Python, shell等大多数语言。

安装Nodejs

可以参考我的这篇文章:http://www.gowhich.com/blog/40

安装 npm

1). Unix/Linux:

1
$ curl http://npmjs.org/install.sh | sh

安装完成后

1
$ npm -v

看看是否安装成功

2). Windows:

待补充

Nodejs的express框架

如果你用过Ruby的Sinatra.rb, 会觉得Express非常熟悉。Express作者是参考sinatra, 写了一个基于node.js的实现。

  1. 安装

由于这个有点特殊,需要为npm添加-g参数, 刚开始安装的时候没有加,导致不能使用epress 命令行参数

1
2
$ npm install -g express
$ epxress -v #看看是否安装成功
  1. 创建一个express项目看看
1
2
$ express nodeblog
$ cd nodeblog
  1. express目录结构

Express 目录结构

1
2
3
4
5
6
7
8
9
10
11
12
目录/文件             说明
./ 根目录,我们的node.js代码都会方这个目录
package.json npm依赖配置文件, 类似ruby中的Gemfile, java Maven中的pom.xml文件.
一会需要在这里添加 markdownjs-js 项目依赖
app.js 项目的入口文件
public/
javascript/
stylesheets/
images/ 存放静态资源文件, jquery/prettify.js等静态库会方这里,当然自己编写的前端代码也可以放这里
views/ 模板文件, express默认采用jade, 当然,你也可以使用自己喜欢的haml,JES, coffeeKup,
jQueryTemplate等模板引擎
node_modules/ 存放npm安装到本地依赖包,依赖包在package.json文件中声明,使用npm install指令安装
  1. 运行程序看看
1
2
$ npm install
$ node app.js

访问http://localhost:3000/

我们看看app.js文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var express = require('express');  
var app = module.exports = express.createServer();

// Express 程序配置
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});

// url路由
app.get('/', function(req, res){
res.render('index', {
title: 'Express'
});
});

app.listen(3000);

下面代码将url渲染到 index.jade文件, 并且传递title参数:

1
2
3
4
5
app.get('/', function(req, res){  
res.render('index', {
title: 'Express'
});
});

其中传递变量title, 在views/layout.jade文件中有定义, 我们这里将title改成”Node Blog”:

1
2
3
4
5
app.get('/', function(req, res){ 
res.render('index', {
title: 'Node Blog'
});
});

修改后效果如下所示:

到这里, Express 入门介绍就到这里,进一步内容需要看参考资料中的相关文档

参考资料:

jade GitHub仓库: https://github.com/visionmedia/jade

《Express中文入门手册》

《markdown语法说明》

《google-code-prettify使用说明》

《使用node.js, markdownjs, prettify.js打造个人写作平台》

《将node.js应用上传到vmc平台》, 这是我前两天写的一篇, 关于如何将应用上传到vmc服务器,后面篇幅不会再做介绍。

http://witcheryne.iteye.com/blog/1165067

Node.js解析HTML DOM的当然是htmlpaser,jsdom。然而个人更喜欢jQuery的风格,与web jQuery的统一API,所以选择了node-jquery.其代码部署在Github的https://github.com/coolaj86/node-jquery.

借助某人之手搞了个示例,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var $ = require('jquery');
String.format = function() {

var s = arguments[0];

for (var i = 0; i < arguments.length - 1; i++) {

var reg = new RegExp("\\{" + i + "\\}", "gm");

s = s.replace(reg, arguments[i + 1]);

}

return s;

};

$.get("https://github.com/popular/forked",function(html){

var $doc = $(html);

console.log("No. name language star forks ")

$doc.find("ul.repolist li.source").each(function(i,project){

var $project = $(project);

var name = $project.find("h3").text().trim();

var language = $project.find("li:eq(0)").text().trim();

var star = $project.find("li.stargazers").text().trim();

var forks = $project.find("li.forks").text().trim();

var row =String.format("{4} {0} {1} {2} {3}",name, language,star,forks,i + 1 );

console.log(row);

});

});

参考:http://www.cnblogs.com/whitewolf/archive/2013/02/27/2935618.html

除(Firefox)自带的XUL模板系统外,还可以使用JavaScript模板,这种方法也可以实现内容格式与结构的分离,但依赖于JavaScript模板引擎通过JavaScript业务逻辑将内容注入到模板中,不需要使用RDF/XML这样的技术

按语法风格

100%基于标准(没有自定义语法)

纯JavaScript(JavaScript函数调用生成HTML)

  • JsonML(没有“浏览器端模板”),也可以使用JavaScript的JSON子集
  • domMaster 和 nodejs master_texthtml
  • Mootools Template Engine (null-tech.com)

纯HTML(使用JavaScript选择器找出正常的HTML,按业务逻辑填充)

  • PURE
  • mustache (有一些设计逻辑,但语法简单)
  • Chain.js (死链接); 这里有说明
  • LightningDOM
  • Mootools Template Engine(zealdev.wordpress.com)

XSL

  • XSLTJS (实现跨浏览器支持的XSL模板)

E4X

  • E4X for templating (注意E4X已被废弃)

标准友好的(自定义属性或者语法,但大部分采用标准兼容的用法)

X/HTML/E4X/XUL 自定义属性和元素

  • Adobe Spry processing instruction attributes
  • ASP.NET client templates
  • Seethrough (使用具有名称空间的E4X属性和元素,注意虽然E4X已被废弃)
  • XUL Templates (只支持XUL)

纯JavaScript嵌入在HTML/XML设计逻辑(ASP/JSP/PHP或者大括号{}风格)

  • EJS (嵌入式JS)
  • PureJSTemplate
  • mjst

自定义用法

HTML + 大括号{} 使用自定义的设计逻辑

  • ASP.NET 客户端模板
  • ExtJS中的模板 (死链接,可通过archive.org获取)
  • JavaScriptTemplates
  • JSmarty (借鉴与Smarty,有更多功能和近期更新)
  • jQSmarty: jQuery Smarty Plugin (死链接) (这里有介绍)
  • JS Repeater
  • JTemplates
  • mjst
  • Mjt
  • mustache (感谢janl)
  • Templates in JQuery
  • Templates in Prototype
  • Whiskers.js

HTML + 没有名称空间的自定义元素和属性

  • distal
  • mjst
  • Mjt
  • google-jstemplate

ASP/JSP风格的自定义逻辑,使用<%…%>

  • JavaScript Micro-Templating 语法与(asp|jsp|php)相似
  • BetterJavascriptTemplates
  • PureJSTemplate
  • JSONML Browser-Side Templates
  • BabaJS
  • Templates in Prototype

按特性

通过元素/节点匹配模板,将整个文档翻译到另一个

XSL

  • XSLTJS (跨浏览器使用的XSL模板)

1,nodejs 的加载html页面

1
2
3
4
5
6
7
8
9
10
function detail(response, query_param){
fs.readFile('./sina_weibo.html','utf-8',function(err, data) {//读取内容
if(err) throw err;
response.setHeader('content-type', 'text/html;charset=utf-8');
response.writeHead(200, {"Content-Type": "text/plain"});
response.write(data);
response.end();
});

}

2,远程获取页面并进行匹配的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function blog(response, query_param){
// fs.readFile('./sina_weibo.html','utf-8',function(err, data) {//读取内容
// if(err) throw err;
// return data;
// });

response.setHeader('content-type', 'text/html;charset=utf-8');
response.writeHead(200, {"Content-Type": "text/plain"});
var options = {
host: '10.211.55.5',
port: 8006,
path: '/detail'
};

var html = '追加变量的变量 ';
http.get(options, function(res) {
res.on('data', function(data) {
console.log("data here = " + data);
// collect the data chunks to the variable named "html"
html += data;
html += "这里在获取数据";
}).on('end', function() {
// the whole of webpage data has been collected. parsing time!
var title = $(html).find('div h3 span').each(function($this){
var a = $(this).children('a').attr('href');
var b = $(this).children('a').text();
console.log(b + ":" + options.host + a);
html += b + ":" + options.host + a;
response.write(html);
});
html += "这里在循环数据";
});
html += '结束';
});
response.end();
}

执行上面的方法,在nodejs里面需要加入几个模块

1
2
3
4
var querystring = require("querystring");
var fs = require("fs");
var http = require('http');
var $ = require('jquery');

如果没有安装jquery的话,执行下面的命令

1
npm install jquery

如果没有安装npm 的话,建议去google一下吧

获取Select :
获取select 选中的 text:

1
$("#select_id”).find("option:selected”).text();

获取select选中的 value:

1
2
$("#select_id option:selected”).val();
($("#select_id”).val();这个方法是错误的)

获取select选中的索引:

1
$("#select_id ").get(0).selectedIndex;

设置select:
设置select 选中的索引:

1
$("#select_id ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value:

1
2
3
$("#select_id ").attr("value”,”Normal");
$("#select_id ").val("Normal”);
$("#select_id ").get(0).value = value;

设置select 选中的text:

1
2
3
4
5
6
7
8
9
var count=$("#select_id ").find("option”).length;
for(var i=0;i<count;i++)
{
if($("#select_id ").get(0).options[i].text == text)
{
$("#select_id ").get(0).options[i].selected = true;
break;
}
}

select根据value默认选中

1
$("#SelectID option[value='selectValue']").attr("selected”,true)

清空 Select:

1
2
3
$("#select_id ").empty();
$("#veg1″).find("option”).clone().appendTo("#veg2″); 添加另一个select option
$("#veg2″).get(0).selectedIndex=2; 设置选中项

关于Poshy Tip是个很简单的提示插件。我觉的还不错,下面做了一个简答的小例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>我的小提示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />


<!-- Tooltip classes -->
<link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />

<!-- jQuery and the Poshy Tip plugin files -->
<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../src/jquery.poshytip.js"></script>

<!-- Setup examples on this page -->
<script type="text/javascript">
//<![CDATA[
$(function(){

$('#demo-basic').poshytip();
});
//]]>
</script>
</head>

<body>

<div id="content">
<p><a id="demo-basic" title="小提示出现了,你好,我是小提示" href="#">快出来小提示</a></p>
</div>
</body>
</html>

关键几个文件要引入

样式文件

1
2
3
4
5
6
7
<link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />

这里面的样式可以跟你自己的需要进行选择定制

脚本文件

1
2
<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../src/jquery.poshytip.js"></script>

这个大家都知道的

具体的演示文档,可以参考这个地址:http://vadikom.com/demos/poshytip/#download

读读英文文档还不错

最近没事,找了几个关于使用php截取字符串的方法,我罗列了一下,看到的朋友可以继续补充,我写到了一个类里面:

code如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<?php
class Helper_String
{
/**
* 第一种截取字符串的方法
* @param [type] $content [description]
* @param string $length [description]
* @return [type] [description]
*/
static function substrs($content,$length='30')
{
if($length && strlen($content)>$length)
{
$num=0;
for($i=0;$i<$length-3;$i++)
{
if(ord($content[$i])>127)
{
$num++;
}
}
$num%2==1 ? $content=substr($content,0,$length-4):$content=substr($content,0,$length-3);
}
return $content;
}

/**
* 第二种截取字符串的方法
* @param [type] $string [description]
* @param [type] $length [description]
* @param string $dot [description]
* @return [type] [description]
*/
static function cutstr($string, $length, $dot = ' ...') {
$strcut = '';
for($i = 0; $i < $length - strlen($dot) - 1; $i++) {
$strcut .= ord($string[$i]) > 127 ? $string[$i].$string[++$i] : $string[$i];
}
return $strcut.$dot;
}

/**
* 第三种截取字符串的方法
* @param [type] $str [description]
* @param [type] $len [description]
* @param string $tail [description]
* @return [type] [description]
*/
static function cutTitle($str, $len, $tail = ""){
$length = strlen($str);
$lentail = strlen($tail);
$result = "";
if($length > $len){
$len = $len - $lentail;
for($i = 0;$i < $len;$i ++){
if(ord($str[$i]) < 127){
$result .= $str[$i];
}else{
$result .= $str[$i];
++ $i;
$result .= $str[$i];
}
}
$result = strlen($result) > $len ? substr($result, 0, -2) . $tail : $result . $tail;
}else{
$result = $str;
}
return $result;
}

/**
* 第四种截取字符串的方法
* @param [type] $str [description]
* @param [type] $start [description]
* @param [type] $len [description]
* @return [type] [description]
*/
static function mysubstr($str, $start, $len="30") {
$tmpstr = "";
$strlen = $start + $len;
for($i = 0; $i < $strlen; $i++) {
if(ord(substr($str, $i, 1)) > 0xa0) {
$tmpstr .= substr($str, $i, 2);
$i++;
} else{
$tmpstr .= substr($str, $i, 1);
}
}
return $tmpstr;
}

/**
* 第五种截取字符串的方法
* @param [type] $str [description]
* @param [type] $from [description]
* @param [type] $len [description]
* @return [type] [description]
*/
static function utf8Substr($str, $len=30, $from=0){
return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$from.'}'.
'((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s',
'$1',$str);
}

/**
* 第六种截取字符串的方法
* @param [type] $string [description]
* @param [type] $sublen [description]
* @param integer $start [description]
* @param string $code [description]
* @return [type] [description]
*/
static function cut_str($string, $sublen, $start = 0, $code = 'UTF-8')
{
if($code == 'UTF-8')
{
$pa ="/[\x01-\x7f]|[\xc2-\xdf][\x80-\xbf]|\xe0[\xa0-\xbf][\x80-\xbf]|[\xe1-\xef][\x80-\xbf][\x80-\xbf]|\xf0[\x90-\xbf][\x80-\xbf][\x80-\xbf]|[\xf1-\xf7][\x80-\xbf][\x80-\xbf][\x80-\xbf]/";
preg_match_all($pa, $string, $t_string); if(count($t_string[0]) - $start > $sublen) return join('', array_slice($t_string[0], $start, $sublen))."...";
return join('', array_slice($t_string[0], $start, $sublen));
}
else
{
$start = $start*2;
$sublen = $sublen*2;
$strlen = strlen($string);
$tmpstr = '';
for($i=0; $i<$strlen; $i++)
{
if($i>=$start && $i<($start+$sublen))
{
if(ord(substr($string, $i, 1))>129)
{
$tmpstr.= substr($string, $i, 2);
}
else
{
$tmpstr.= substr($string, $i, 1);
}
}
if(ord(substr($string, $i, 1))>129) $i++;
}
if(strlen($tmpstr)<$strlen ) $tmpstr.= "...";
return $tmpstr;
}
}

/**
* 第七种截取字符串的方法
* @param [type] $String [description]
* @param [type] $Length [description]
* @param boolean $Append [description]
* @return [type] [description]
*/
static function sysSubStr($String,$Length,$Append = false)
{
if (strlen($String) <= $Length )
{
return $String;
}
else
{
$I = 0;
while ($I < $Length)
{
$StringTMP = substr($String,$I,1);
if ( ord($StringTMP) >=224 )
{
$StringTMP = substr($String,$I,3);
$I = $I + 3;
}
elseif( ord($StringTMP) >=192 )
{
$StringTMP = substr($String,$I,2);
$I = $I + 2;
}
else
{
$I = $I + 1;
}
$StringLast[] = $StringTMP;
}
$StringLast = implode("",$StringLast);
if($Append)
{
$StringLast .= "...";
}
return $StringLast;
}
}

}

测试的结果总结如下

测试字符串

LIB内容个数200字内容个 数200字内容个数200字 内容个数200字内容个数200字内容个数200字内容 个数200字内容

截取字符串的长度为30

  • 第一种方法的截取字符串的结果是:
    LIB内容个数200字内容个 数200字内容个数200字 内容个数200字内容个数200字�

  • 第二种方法的截取字符串的结果是:
    LIB内容个数200字内容个 数200字内容个数200字 内容个数200字内容个数200字� …

  • 第三种方法的截取字符串的结果是:
    LIB内容个数200字内容个 数200字内容个数200字 内容个数200字内容个数200字内�

  • 第四种方法的截取字符串的结果是:
    LIB内容个数200字内容个 数200字内容个数200字 内容个数200字内容个数200字内容个数200字内容 个数200�

  • 第五种方法的截取字符串的结果是:(成功)
    LIB内容个数200字内容个 数200字内容个数200字 内

  • 第六种方法的街区字符串的结果是:(成功)
    LIB内容个数200字内容个 数200字内容个数200字 内…

  • 第七种方法的截取字符串的结果是:(成功)
    LIB内容个数200字内容个

参考文章:http://www.jb51.net/article/4999.htm

网站找过关于ISO网络的状态判断,官方也是有示例的,但是自己琢磨了一下,下面的代码还是可以不错的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/***
* 此函数用来判断是否网络连接服务器正常
* 需要导入Reachability类
*/
+ (BOOL)isExistenceNetwork
{
BOOL isExistenceNetwork;
Reachability *reachability = [Reachability reachabilityWithHostName:@""]; // 测试服务器状态

switch([reachability currentReachabilityStatus]) {
case NotReachable:
isExistenceNetwork = FALSE;
break;
case ReachableViaWWAN:
isExistenceNetwork = TRUE;
break;
case ReachableViaWiFi:
isExistenceNetwork = TRUE;
break;
}
return isExistenceNetwork;
}

参考文章:http://www.cnblogs.com/pengyingh/articles/2382259.html

最近写前端,于是思考如何将前端写的更好,而且还能学到东西,于是可是了疯狂的搜索,结果发现了好多好玩的,新奇的东西

1,走着走着就发现了一个奇迹

起因是这样引起的,由于最近一直在用bootstrap,于是又去找他了,就找到了这个http://www.bootcss.com/ ,结果奇迹就一个一个的被我发现了,在这里我找到了”Bootstrap相关开源项目推荐“,你才怎么着,我跑到了这里http://www.w3cplus.com/ ,结果我好奇的看了里面一篇文章,结果奇迹有一个一个的出现了。

2,一切的代码实现都可以这样的简单

http://www.bootcss.com/p/bootstrap-form-builder/
Bootstrap表单构造器
http://www.bootcss.com/customize.html
Bootstrap定制
http://www.bootcss.com/lesscss.html
LESS:LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
http://www.boottheme.com/
BootTheme
http://www.plugolabs.com/twitter-bootstrap-button-generator/
Twitter Bootstrap Button Generator
http://bootboxjs.com/
Bootstrap弹出框
终于知道了我使用bootstrap的话,后面的结果会有多么的简单,方便

3,这里不妨推荐另外一个框架FlatUI,适合我的审美观

4,写代码给自己一定的时间去探索,没有探索过是创新不出来的

CSS3伪类选择器:nth-child()
简单的归纳下nth-child()的几种用法。
第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。

1
(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。

1
(EG) li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第 三:nth-child(an+b) 与 :nth-child(an-b) 先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如 3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)

1
2
3
4
5
(EG)li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/ 
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(30){background:orange;}/*相当于(3n)*/
li:nth-child0n+3){background:orange;}/*相当于(3)*/

第四:nth-child(-an+b) 此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。

1
2
(EG) li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/ 
li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/

第五:nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

参考:http://www.cnblogs.com/pansly/archive/2011/05/04/2037003.html

0%