将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 {
  /* Properties */
}

如果你只是在选择器之间放置一个空格,样式将适用于第一个的所有孩子(和孩子的孩子).所以在这种情况下,#main_text的任何子元素都具有类名.title.如果你使用#main_text而不是空格,它只会选择元素的直接子元素,而不是子元素,ex:

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

要么在这种情况下工作,但第一种更常用.

Answer 2

为此使用 Css 选择器，或者了解有关 Css 选择器的更多信息，只需转到此处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 */
}