将 CSS 规则应用于 div 内的嵌套类答案

【问题标题】：Apply CSS rules to a nested class inside a div将 CSS 规则应用于 div 内的嵌套类
【发布时间】：2012-02-08 17:24:37
【问题描述】：

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

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

如何仅将 CSS 应用于嵌套在特定 div 中的类 title？

【问题讨论】：

标签： html css

【解决方案1】：

你使用

#main_text .title {
  /* Properties */
}

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：