chrome中奇怪的选择器行为答案

【问题标题】：strange selector behavior in chromechrome中奇怪的选择器行为
【发布时间】：2011-10-24 13:13:11
【问题描述】：

见 jsfiddle here

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

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

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>

【问题讨论】：

顺便说一句：在 windows 上使用 Chome 13.0.782.112 m
只使用类而不是定义自定义属性：现场演示： jsfiddle.net/L3uP7/5
我在 chrome 13.0.782.112m 上没有看到这个问题。然而，“selected”属性不应该用于
.

【解决方案1】：

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

如果您改用class，那么您可以在所有浏览器中正确选择它：http://jsfiddle.net/SReUe/

【讨论】：

我使用的 cms 有一个辅助函数，它添加了 selected="selected"。平时用在之前没问题
是的，<option> 元素可以包含 selected - 这是规范的一部分。仅更改元素并不意味着允许所有属性。

【解决方案2】：

您是否尝试过让您的选择器更具体一点？

例如：li[selected="selected"] table td

【讨论】：

是的，这行得通。我会改成这样。只是想知道我之前的做法是不是错了？
嗯...我个人不会说“错误”，但正如上面所说，使用类会更好。但是当您使用 CMS 时，这可能不是一个选项。