Как написать селектор CSS для этой страницы?

Question

Я пытаюсь установить фон тегов h2, h3, h4, которые существуют в теге div с классом Container3_title. Я использую этот селектор, но все теги h2, h3, h4, которые существуют на странице, изменены. Пожалуйста, советы

CSS: __________________________________________________

div.Container3_title > h2, h3, h4, h5 { 
      background: rgba(177, 49, 49, 0) url("images/nb-dots.png") repeat scroll 0% 0%; 
     } 

HTML: ________________________________________________

<div class="Container3_body SpacingBottom"> 
    <div class="Container3_title"> 
     <h3> 
      <span id="dnn_ctr428_dnnTITLE_titleLabel" class="Head">Text/HTML</span> 



     </h3> 
    </div> 
    <hr/> 
    <div id="dnn_ctr428_ContentPane"><!-- Start_Module_428 --><div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC"> 
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal"> 
    <h3 style="text-align: center;"><span style="background-color: #fac08f;">افزودن محتوا...</span></h3> 
<p style="margin-right: 40px;"><em><span style="background-color: #dbe5f1;"><br /> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span> <span style="text-decoration: underline;"> </span></em><span style="text-decoration: underline;"> </span></p> 
<h3><span style="text-decoration: underline;"><em><span style="text-decoration: underline;"><br /> 
</span></em></span></h3> 
<span style="background-color: #00b050;"> </span><span style="text-decoration: underline;"><span style="background-color: #00b050;"> </span><em><span style="background-color: #00b050;">&nbsp;جمعه, 29 آبان 1394</span><br /> 
</em></span> 
</div> 

</div><!-- End_Module_428 --></div> 
    <div class="clear"></div> 
</div> 
</div></div> 




    <div class="row-fluid"> 
     <div id="dnn_leftPane" class="col-lg-8 DNNEmptyPane"></div> 
     <div id="dnn_sidebarPane" class="col-lg-4 sidebar "><div class="DnnModule DnnModule-DNN_HTML DnnModule-417"><a name="417"></a> 



<div class="Container7_body SpacingBottom"> 
<div class="Container7_title"> 
    <h4> 
     <span id="dnn_ctr417_dnnTITLE_titleLabel" class="Head">تیتر مطلب</span> 



     <span class="clip"></span> 
    </h4> 
</div> 


    <br /> 
    <div id="dnn_ctr417_ContentPane"><!-- Start_Module_417 --><div id="dnn_ctr417_ModuleContent" class="DNNModuleContent ModDNNHTMLC"> 
    <div id="dnn_ctr417_HtmlModule_lblContent" class="Normal"> 
    <p>در این کتاب آموزشی با برنامه نویسی وب با Dart آشنا می شوید.<br /> 
این کتاب&nbsp;آموزشی محصول موسسه Apress می باشد.</p> 
<p>سرفصل های کتاب:</p> 
<ul> 
    <li>آغاز به کار برنامه</li> 
    <li>راه اندازی Dart</li> 
    <li>کار با ابزارها در Dart</li> 
    <li>کار با ویرایشگر در Dart</li> 
    <li>بهینه سازی برای DartVM و Dartium</li> 
    <li>کار با&nbsp;نرم افزار کاربردی</li> 
    <li>مبانی&nbsp;Dart</li> 
    <li>کار با&nbsp;اپراتورها</li> 
    <li>کار با&nbsp;انواع داده ها</li> 
    <li>کار با توابع</li> 
    <li>استثنا در پردازش و کنترل خطا</li> 
    <li>کار با کلاس Dart</li> 
    <li>پیاده سازی های عمومی و Typedefs</li> 
</ul> 
</div> 

</div> 

Answer 1

Вопрос ваш селектор. У вас есть этот

div.Container3_title > h2, h3, h4, h5 

Каждая запятая , представляет новый селектор. Вместо этого вы хотите настроить таргетинг на каждый заголовок заголовка внутри родительского контейнера.

Для этого вам необходимо определить контейнер для каждого из них.

div.Container3_title h2, 
div.Container3_title h3, 
div.Container3_title h4, 
div.Container3_title h5 { 
    background: rgba(177, 49, 49, 0) url("images/nb-dots.png") repeat scroll 0% 0%; 
} 

> вы используете представляет собой прямой селектор ребенка.

Разница заключается

.parent > .child будет выбрать только немедленные детей (один уровень глубины) на .parent

.parent .child подберет все .child элементы внутри из .parent.