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

I don't know exactly how to apply css to a nested element. Here is my example code, but I'm looking for a manual that explains all the rules.

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

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

How can I apply css to only the class title nested inside that particular div?

如何将css仅应用于嵌套在特定div中的类标题？

1 个解决方案

#1

you use

你用

#main_text .title
{
    /*attributes*/
}

if you just put a space between the selectors, styles will apply to all children (and children of children) of the first. So in this case, any child element of #main_text with the class name .title . If you use > instead of a space, it will only select the direct child of the element, and not children of children, ex:

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

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

either will work in this case, but the first is more typically used.

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