将CSS规则应用于div中的嵌套类 [英] Apply CSS rules to a nested class inside a div

问题描述

我不知道如何将CSS应用于嵌套元素.这是我的示例代码，但我正在寻找一本说明所有规则的手册:

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:

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

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

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

推荐答案

您使用

#main_text .title {
  /* Properties */
}

如果仅在选择器之间放置一个空格，则样式将应用于第一个选择器的所有子代(和子代子代).因此，在这种情况下，类名称为title的#main_text的任何子元素.如果使用>而不是空格，它将仅选择元素的直接子级，而不选择子级的子级，例如:

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, e.g.:

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

在这种情况下，任何一种都可以使用，但是更常用的是第一种.

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

这篇关于将CSS规则应用于div中的嵌套类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！