</p> <style> <p>#content1 h2 { background-color: #728371; }</p> </style> <p id="content1"> <h2>heading 2</h2> </p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <style> <p>#content1 h2 { background-color: #728371; }</p> </style> <div id="content1"> <h2>heading 2</h2> </div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

ffish added:

我感觉只有符合包含逻辑的标签，才能显示正确的结果。上面最后两行不符合包含逻辑所以被浏览器引擎忽略。运行一下这段代码:

</p> <style> <p>#content1 h2 { background-color: #728371; }</p> </style> <div id="content1"> <h2>heading 2</h2> </div> <p><span id="content1"><br /> <h2>heading 2</h2> <p></span></p> <ul id="content1"> <h2>heading 2</h2> </ul> <p><a id="content1"><br /> <h2>heading 2</h2> <p></a></p> <table> <tr> <td id="content1"> <h2>heading 2</h2> </td> </tr> </table> <h1 id="content1"> <h2>heading 2</h2> </h1> <p id="content1"> <h2>heading 2</h2> </p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

testing…

</p> <p onclick="alert(1)">paragraph click test.</p> <p onclick="alert(1)"> <h2>paragraph click test.</h2> </p> <p onclick="alert(1)">real paragraph<br /> <h2>paragraph click test.</h2> </p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

可能是因为 block 也细分为好几种形式的缘故吧,但 alert 的只是 “block”

</p> <style> <p>#content1 h2 { background-color: #728371; }</p> </style> <div id="content1" onclick="alert(document.defaultView.getComputedStyle(this, null).getPropertyValue('display'))"> <h2>heading 2</h2> </div> <p id="content1" onclick="alert(document.defaultView.getComputedStyle(this, null).getPropertyValue('display'))">111<br /> <h2>heading 2</h2> </p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]