建议后面加个数字来区分
要不然，你这个肯定通过不了W3C
补充：
根据你的节点：
document.getElementById("pp").getElementsByTagName("SPAN")[1]
这个就是第二个,第一个是[0]
标准游览器目前是不可能实现的。
如果你确定你的用户都是用的IE浏览器的话，可以用IE专有的CSS表达式expression
不过，这个东东不光只能IE专用这个缺点，还相当耗资源。
我的建议，是给每个span一个class，或者就用我上面的那个JS来动态调整
算了，还是按你要求给你写个，相信你能看懂。记住，只有IE游览器才有效！
<style>
#pp span {
background-color:expression(function(){
if (!window.color_index){window.color_index = 0}
var color = ["red","green","yellow","blue"][color_index]
color_index ++
return color
}())
}
</style>
<div id="pp">
<span>红色</span>
<span>绿色</span>
<span>黄色</span>
<span>蓝色</span>
</div>
在样式表定义一个样式的时候，可以定义id也可以定义class。1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。无论是用“.”，还是“#”都无所谓，但是最好遵循，主要的重要的特殊的最外层的用“#”。class在同一个HTML网页页面可以无数次的调用相同的class；这样就可以像调用函数一样不用再一个页面i重复一个属性，只需要一个class类的选择，就可以在同一个位置调用相同的CLASSid表示着标签的身份，在JS脚本中会用到ID ，当js 要修改一个标签属性时，js会将id名做为唯一标识进行操作，id在页面职能出现一次。并且是唯一性。
CSS里面ID与Class的区别是格式与用途的不同，具体有：
在CSS文件里书写时，ID加前缀"#"；Class用"."
ID一个页面只可以使用一次；Class可以多次引用。
ID是一个标签，用于区分不同的结构和内容。就如函数中的变量，如果一个调用中出现两个一致的变量，就会出现混淆，系统将报错无法识别；Class是一个样式，可以套在任何结构和内容上，如同属性一致则认为是一个类。
从概念上说就是不一样：ID是先找到结构/内容，再给它定义样式；Class是先定义好一种样式，再套给多个结构/内容。
CSS里面定义ID与Class格式与用途的不同具体（例子）有：
定义格式不同：
形如ID="aaa"定义的,在css中是这样设置其样式的：#aaa{ 样式列表 }
以Class="bbb"形式定义的，在CSS中应该这样设置其样式：.bbb{ 样式列表 }
用途不同：
Class元素分2种,关联的和独立的。关联的用于html的相关tag，比如：h1.redone{color:red}
<h1 class= redone>字体为红色的 <h1>
<h1>字体是黑色的 <h1>
独立的元素可以用于所有的html元素的，比如
.classname {property:value}
ID元素和独立的Class功能相似，区别是ID是唯一的而且对于javascript操作html 元素有帮助。
#idname {property: value}
归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。
注：A、在样式表定义一个样式的时候，可以定义id也可以定义class。B、目前主流浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过ID来控制Div时就会出现错误。
