html - chrome 中奇怪的选择器行为

Question

参见 jsfiddle here

选择器突出显示所有表格，而不是它应该选择的表格。它只对第一个列表项执行此操作。如果我将 selected="selected"移动到另一个列表项，我就没有问题。我在 ie 的 ff 中没有看到这个问题。

我做错了什么，还是这是一个新错误？

CSS

  li[selected="selected"] table
  {
    background:yellow;
  }

html

<li selected="selected">
        <a href="#">
            <table>
                <tr>
                    <td>
                        Row 1 - Col 1
                    </td>
                    <td class="second">
                        Row 1 - Col 2
                    </td>
                </tr>
            </table>
        </a>
    </li>
    <li>
        <a href="#">
            <table>
                <tr>
                    <td>
                        Row 2 - Col 1
                    </td>
                    <td class="second">
                        Row 2 - Col 2
                    </td>
                </tr>
            </table>
        </a>
    </li>
    <li>
        <a href="#">
            <table>
                <tr>
                    <td>
                        Row 3 - Col 1
                    </td>
                    <td class="second">
                        Row 3 - Col 2
                    </td>
                </tr>
            </table>
    </a>
    </li>

Answer 1

我认为答案是 selected不是 <LI> 的有效属性标签。 Chrome 浏览器(对或错)只是忽略了 CSS 中的那个元素。

如果您使用了 class相反，您可以在所有浏览器中正确选择它:http://jsfiddle.net/SReUe/