文章的第一段代码中，只获取到了第一个 p 标签的 background-color，那么怎么才能获取到第二或第三个 p 的背景颜色呢，加入选择器 :nth-child()：

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回第一个 p 元素的 background-color </button>
</body>
$("button").click(function(){
    alert("p1背景颜色 = " + $("p:nth-child(2)").css("background-color"));
    alert("p2背景颜色 = " + $("p:nth-child(3)").css("background-color"));
    alert("p3背景颜色 = " + $("p:nth-child(4)").css("background-color"));
});

尝试一下 »

PS: 这里 :nth-child() 选择器默认以 body 作为父标签，所以 :nth-child(1) 是 <h2> </h2>。

1 楼和 2 楼都很麻烦啊:

<div class="getColor">
  <p class="a">first</p>
  <p class="b">second</p>
  <p class="c">third</p>
</div>
<button class="color">弹窗返回颜色</button>

<script>
  $(function(){
     $(".color").click(function(){
       alert("b的背景颜色为：" + $(".getColor").children(".b").css("background-color"));
     }); 
   });
</script>

这样子不是更清晰吗？？？

$(function() {
    $("button").click(function() {
       for(var i = 0; i < $("p").length; i++)
        {
            alert($("p").eq(i).css("background-color"));
        }
  });
});