如何为这个页面编写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将选择.child内部的所有元素.parent.