多个选择器无法正常工作

Question

我有一些html表格为

<div>
    <table id="tbl1" class="tblcls">
    <tr><td>
    </table>

    <table id="x">
    <tr><td>
    </table>

    <table id="tbl3">
    <tr><td>
    </table>
</div>

我正在应用下面的多选择器来设置那些id以“tbl”开头的表格的背景颜色，并且有一个类“tblcls”

 $(document).ready(function () 
{           
            var $table = $("table.tblcls,[id^=tbl]");            
            $table.css("background-color", "yellow");
});

但是它选择了两个带有ids tbl1，tbl3的表，其中预期的输出只是第一个表（id = tbl1）。

我正在做的错误是什么以及如何解决？

由于

Answer 1

类和属性都应该在桌面上：

$("table[id^='tbl'].tblcls");

小提琴：http://jsfiddle.net/jonathansampson/sf2zP/