将css样式应用于div中的嵌套类

Question

我不确切知道如何将css应用于嵌套元素。 这是我的示例代码，但我正在寻找一本解释所有规则的手册。

<div id="content">
  <div id="main_text">
      <h2 class="title"></h2>
  </div>
</div>

如何将css仅应用于嵌套在特定title内的班级div？

Answer 1

你使用

#main_text .title
{
    /*attributes*/
}

如果您只是在选择器之间放置一个空格，则样式将适用于第一个的所有子项（和子项的子项）。所以在这种情况下，＃main_text的任何子元素都具有类名.title。如果你使用>而不是空格，它只会选择元素的直接子元素，而不是子元素的孩子，例如：

#main_text>.title
{
    /*attributes*/
}

在这种情况下都可以使用，但第一种更常用。

Answer 2

  

为此使用Css Selector，或了解有关Css Selector的更多信息，只需转到此处https://www.w3schools.com/cssref/css_selectors.asp

#main_text > .title {
  /* Style goes here */
}

#main_text .title {
  /* Style goes here */
}

Answer 3

如果您需要定位多个类，请使用：

#main_text .title, #main_text .title2 {
  /* Properties */
}