html - 如何为该页面编写 CSS 选择器？

Question

我尝试使用 Container3_title 类设置存在于 div 标签中的 h2、h3、h4 标签的背景。我使用此选择器，但页面中存在的所有 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 将选择 .parent 内的所有 .child 元素。