Question

我有以下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 为红色，但事实并非如此。我做错了什么？

Answer 1

问题是：

   <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;
}

Answer 2

如前所述，你不能把标题放在段落里面。

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

很多浏览器都不允许你这样做，它们会撕掉段落和标题。

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

Can't wrap headings inside paragraphs

Answer 3

这是因为

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

相当于

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

because

如果p元素是立即的，则可以省略p元素的结束标记接着是address，article，aside，blockquote，dir，div，dl， fieldset，footer，form，h1， h2 ，h3，h4，{ {1}}，h5，h6，header，hgroup， hr，menu，nav，ol，p，pre，section或table，元素，或者如果有的话父元素中没有更多内容，父元素不是 ul元素。

因此a元素永远不能是h2元素的子元素，除非该页面是使用XML Content-type提供的。

Answer 4

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

Answer 5

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

p ~ h2 {
    color: red;
}

<强> jsFiddle example

当<p>标签具有子</p> <h2>标签时，CSS代码无法显示正确的颜色</h2>

5 个答案: