Question

我是Html的新手。我试图在类和id的帮助下更改段落中标题的某些属性。

          <div class="article">
            <h1> I am here </h1>
              <p> 
                 where are u? 
                 <h1>   I am looking for u. </h1>
              </p>
         </div>

如果我使用.article > h1选择器，则会同时选择<h1>。我才知道我们不能选择单个h1。 Plz帮助我。

Answer 1

您无法在h1标记中嵌套块级（p）元素。

您的选择器.article > h1会选择两个h1代码，因为您的浏览器正在移动h1标记之外的嵌套p以使您的代码在语法上正确

您的代码可能会被浏览器更改为以下内容：

    <div class="article">
        <h1> I am here </h1>
        <p>where are u?</p>
        <h1>   I am looking for u. </h1>
     </div>

Answer 2

您可以使用first-child匹配第一个子元素：

div h1:first-child {
    color: red;
}

demo

CSS选择器功能强大。如果你想学习它们，我建议你试试这个类似tuto的游戏：CSS Diner。

Answer 3

如果您想选择第一个h1使用.article > h1:first-of-type，如果您想选择第二次使用.article > h1:last-of-type。

Answer 4

这是可能的，但问题是，如果你在段落中创建标题，那么它将开始到新行。如果您制作级联样式表，则可以

<div class="article">
  <h1> I am here </h1>
  <p>where are u?
  <h1>   I am looking for u. </h1>
  </p>
</div>

.article p h1
{
  margin:(set required margin) ;
}

Answer 5

您可以使用子伪选择器（http://www.w3schools.com/css/css_pseudo_elements.asp）

例如：

http://jsfiddle.net/YU79W/

.article h1:nth-of-type(2) {
    color:red;
}
.article h1:nth-child(1)
{
background:blue;
    color:white;
}

您可以使用任意数量的其他方法来选择另一个包含的元素之一。学习：http://www.w3schools.com/cssref/css_selectors.asp并练习，练习，练习：D

Answer 6

为什么不给h1一个ID？

<div class="article">
        <h1 id="main">I am here </h1>
          <p> 
             where are u? 
             <h1>   I am looking for u. </h1>
          </p>
</div>

然后使用#main {}选择它。

或者你可以在这个例子中使用“.article h1：first-child”，因为它是第一个孩子。

我们可以在html文档中使用段落中的标题吗？

6 个答案: