2

我有以下 HTML 代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*
    p.second > h2 {
        color: red;
    }
    */
    p > h2 {
        color: red;
    }
</style>
</head>
<body>

   <p >
      <h2>hello,world</h2>
       <h2>hello,world</h2>
   </p>
</body>
</html>

我希望看到hello,world是红色的，但事实并非如此。我究竟做错了什么？

4

5 回答 5

6

问题是：

   <p>
      <h2>hello,world</h2>
      <h2>hello,world</h2>
   </p>

不是有效的 HTML 代码（或者，至少是非常草率的HTML 代码）。<p>标签只能包含内联元素，因为标签<h2>是块元素。基本上，一旦浏览器看到<h2>标签，它会自动关闭<p>标签，使两个标签成为兄弟。您需要使用另一个包含元素，例如<div>：

   <div>
      <h2>hello,world</h2>
      <h2>hello,world</h2>
   </div>

那么你的风格将是：

div > h2 {
    color: red;
}
于 2013-07-10T16:37:53.663 回答
2

如前所述，您不能将标题放在段落中。

这不仅仅是关于网络标准或礼仪的协议，而是一个实际的障碍，你不能

许多浏览器不会让你这样做，他们会撕开段落和标题。

因此，任何p h2或p > h2选择器都不起作用，您尝试使用p + h2{ color: red;}（它适用于以 ap 标签开头的 h2 标签）或类似的东西

不能在段落内换行

于 2013-07-10T17:01:11.723 回答
2

这是因为

<p >
      <h2>hello,world</h2>

相当于

<p >
      </p><h2>hello,world</h2>

因为

如果元素后面紧跟一个, , , , , , , , , , , , , , , , , , , , , , , , , , or ,p元素的结束标签可以省略，或者如果没有父元素中的内容较多且父元素不是 元素。paddressarticleasideblockquotedirdivdlfieldsetfooterformh1h2h3h4h5h6headerhgrouphrmenunavolppresectiontableula

所以h2元素永远不能是元素的子p元素，除非页面是使用 XML Content-type 提供的。

于 2013-07-10T17:02:15.877 回答
1

您不能h2进入p，因为它不是有效的 HTML 代码。只需替换p为 adiv即可。

于 2013-07-10T16:38:21.583 回答
1

并不是我提倡这一点，但您可以通过使用 CSS 通用兄弟选择器来避开无效的 HTML 问题：

p ~ h2 {
    color: red;
}

jsFiddle 示例

于 2013-07-10T16:40:13.937 回答