Html 如何使用多个标题css

我想在css中使用不同的标题/页眉，使用相同的字体，但字体大小不同，等等。我有：

#titulo1{
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-height:50px;
  color: #ffffff;
}

#titulo2{
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  font-height: 40px;
  color: #73bd34;
}

#titulo3{
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-height: 30px;
  color: #5f9b16;
}

#titulo4{
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-height: 15px;
  font-weight: bold;
  color: #000000;
}

现在我想对一些div使用一些标题，对其他div使用其他标题。 像这样：

.slogan #titulo1{
...
}

.pesquisa #titulo3{
...
}

但它不起作用，我只能在html文件中使用它，如下所示：

<div class="slogan" id="titulo1">

---

是的，我已经访问了这个页面：但仍然没有任何内容

您可以使用选择器来选择id以“titulo”开头的所有元素

定义

。标语#titulo1

没有意义，因为id是唯一的标识符，所以

#titulo1

的意思是相同的

---

无论如何，具有多个类的特定元素的选择器，例如

将看起来

.class1.class2

（类名之间没有空格）或

div.class1.class2

是css中的空格，这使得它很难实现。让我们看看：

请注意：

  .slogan  #titulo1{
      color:red; 
   }

.slogan#titulo1{
    color:red;
 }

这将适用于以下html结构

<div class="slogan">
   <div id="titulo1">
   </div>
</div> 

<div class="slogan" id="titulo1">

</div> 

这将适用于以下html结构

<div class="slogan">
   <div id="titulo1">
   </div>
</div> 

<div class="slogan" id="titulo1">

</div> 

---

您是否注意到css中的空格，如果您放置了一个空格，表示它们位于不同的元素中

请使用以下命令。希望你的问题能得到解决：）

--------
--------

我建议您查看CSS选择器的文档：您需要使用类而不是ID-ID应该是唯一的。如果您想用一类标语和一个id为titulo1的元素来更改元素，则需要删除选择器之间的空格：

#titulo1.lamposon

（我已经交换了顺序，因为我希望id优先，因为它们的权重更大）。