如果<span>有一个内部，Css 悬停在上面不起作用<tr>？

Question

在<table>中包含<tr>时，为什么<span>悬停不起作用？

这里有一个例子：

html

<p>
    <table>
        <tr><td>
            <a>HOVER</td></tr><span><tr><td>child</td></tr></span></a>
       <tr><td> <span>immediate sibling</span>
           <span>general sibling</span></tr></td>
        </tr>
    </table>
</p>

css

p { font-size:20px; margin:20px; cursor:default; }
a { color:blue; border:3px solid blue; }
span { background:#ccc; }
span:hover { background:yellow; }

http://jsfiddle.net/UAHw7/22/

Answer 1

因为<span>首先是不允许的。

使用验证器来帮助您修复HTML。然后担心它的样式。

Answer 2

span包含表行是无效的；特别是不要将<tr>元素嵌套在<span>元素内。正如Quentin所指出的，使用HTML验证器（与Quintin的验证器不同；这允许您通过HTML进行验证）。

你小提琴里的HTML在几个方面都是错误的；一个横跨多个tr和td元素的anchor标记，一个嵌套在span标记中的tr元素，以及一个bonus（你在想什么？）tr结束标记。把你的小提琴改成这个：

<table>
    <tr>
        <td>
            <a>HOVER</a>
        </td>
    </tr>
    <tr>
        <td><span>child</span></td>
    </tr>
    <tr>
        <td>
            <span>immediate sibling</span>
            <span>general sibling</span>
        </td>
    </tr>
</table>

Edit：删除了<p>，因为它不能包含块元素（如<table>）。

Answer 3

<p><table>
<tr><td><span><a>HOVER</a></span></td></tr>
<tr><td>child</td></tr>
<tr><td> <span>immediate sibling</span>
<span>general sibling</span></tr></td>
</tr></table>

这是你需要的吗。。。