将css样式应用于div中的嵌套类 [英] apply css style to a nested class inside div

问题描述

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

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

如何将css只应用于类 title

解决方案

您使用 p>

  #main_text .title 
 {
 / * attributes * / 
} 
  

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

 ＃main_text> .title 
 {
 / * attributes * / 
} 
  
 
 
 
将在这种情况下工作，但第一个更常用。
 
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>
How can I apply css to only the class title nested inside that particular div?
解决方案
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
{
    /*attributes*/
}
either will work in this case, but the first is more typically used.

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