Question

我想在我的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使用一些标题，而对其他人使用其他标题。像这样：

.slogan #titulo1{
...
}

.pesquisa #titulo3{
...
}

但它不起作用，我只能通过在我的html文件中使用它来使它工作：

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

是的，我已经访问过这个页面：http://www.w3schools.com/cssref/css_selectors.asp但仍然没有访问

Answer 1

您可以使用选择器选择id以“titulo”

开头的所有元素

[id^="titulo"] {
  font-family: 'Roboto', sans-serif;
}

#titulo1{
  font-size: 40px;
  font-height:50px;
  color: #ffffff;
}

#titulo2{
  font-size: 30px;
  font-height: 40px;
  color: #73bd34;
}

#titulo3{
  font-size: 20px;
  font-height: 30px;
  color: #5f9b16;
}

#titulo4{
  font-size: 13px;
  font-height: 15px;
  font-weight: bold;
  color: #000000;
}

定义.slogan #titulo1没有意义，因为id是唯一标识符，因此#titulo1表示相同。

无论如何选择具有多个类的特定元素，例如<div class="class1 class2">会看.class1.class2（类名之间没有空格）或div.class1.class2

Answer 2

它在css中的空间，这使得它变得困难。让我们看看：

请注意：

  .slogan  #titulo1{
      color:red; 
   }

这适用于以下html结构

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

现在请注意：

.slogan#titulo1{
    color:red;
 }

这适用于以下html结构

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

</div>

您是否注意到css中的空格，如果您放置的空间意味着它们位于不同的元素中

Answer 3

使用以下内容。希望你的问题能够得到解决：）

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

如何使用多个标题css

3 个答案: