选择深度嵌套 div

Question

我想将 div id="awards" 的内联样式移动到 css，但到目前为止只能使其内联工作。我也想在 div 中设置 h3 的样式，但也无法正确识别该选择器。关于如何识别 css 中的 div 和 h3 的任何想法？

我在我的样式表中尝试了很多不同的选择器，但我认为这行得通，但行不通。

#awards {
    display: inline-block;
    position: absolute;
    z-index: 1000;
    font-size: 100%;
    bottom: 20%;
    margin: 0 auto;
    left: 0;
    right: 0;
    color: white;
}

这是渲染页面的代码

<body class="home page page-id-7 page-template page-template-page-home page-template-page-home-php unknown">
<div id="slideNav">
    <a href="javascript:jQuery.pageslide.close()" class="closeBtn"></a>
    <div id="mobileNav">
    <div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="mainNav"><li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-43"><a href="http://www.gallagherconstructiontahoe.com/">Home</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.gallagherconstructiontahoe.com/about/">About</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://www.gallagherconstructiontahoe.com/services/">Services</a></li>
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://www.gallagherconstructiontahoe.com/portfolio/">Portfolio</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-48"><a href="http://www.gallagherconstructiontahoe.com/category/press/">Press</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-49"><a href="http://www.gallagherconstructiontahoe.com/category/awards/">Awards</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://www.gallagherconstructiontahoe.com/contact/">Contact</a></li>
</ul></div> 
    </div>
</div>

<div id="container" style="opacity: 1;">    
<div id="header">   

    <div class="inside clearfix">

                <div id="logo">

            <h1 class="logo"><a href="http://www.gallagherconstructiontahoe.com"><img src="http://dev.gallagherconstructiontahoe.com/wp-content/uploads/2014/05/logo-block-white-option-21.png" alt="Gallagher Construction" title=""></a></h1>

        </div>

        <div id="mainNav" class="clearfix">                         
            <div class="menu-main-navigation-container"><ul id="menu-main-navigation-1" class="sf-menu sf-js-enabled sf-shadow"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-43"><a href="http://www.gallagherconstructiontahoe.com/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.gallagherconstructiontahoe.com/about/">About</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://www.gallagherconstructiontahoe.com/services/">Services</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://www.gallagherconstructiontahoe.com/portfolio/">Portfolio</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-48"><a href="http://www.gallagherconstructiontahoe.com/category/press/">Press</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-49"><a href="http://www.gallagherconstructiontahoe.com/category/awards/">Awards</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://www.gallagherconstructiontahoe.com/contact/">Contact</a></li>
</ul></div>         
        </div>

        <a href="#slideNav" class="menuToggle"></a> 

        <div id="sidebar" class="clearfix"> 




    </div><!-- end sidebar -->  

    </div>  

</div>


<div id="middle" class="clearfix">  
<div id="content" class="full"> 

        <div class="slideshow">         
            <ul class="slides">


                <li id="slide1" class="post-9 slide type-slide status-publish hentry" style="height: 753px; background-image: url(http://www.gallagherconstructiontahoe.com/wp-content/uploads/2015/01/313-FRONT-SLIDE.jpg);">                              
                        <div class="details" style="margin-top: -143.5px; display: block;">
                            <div class="box">
                                <div class="inside">
                                    <div class="text">
                                        <h2>Beautiful.&nbsp;Solid. Quality.</h2>
<h5>Full service construction focusing on quality craftsmanship from foundation to finish.</h5>
<p><a href="/portfolio/" target="_parent" style="background-color:#6D2727;" class="ttsc_button button ">View Our Homes</a></p>

                                    </div>
                                </div>
                            </div>                  
                        </div>                                  
                    <div class="awards">
                        <h3>2014 CATT Residential Project of the Year Winner</h3>
                        <h3>Tahoe Quarterly Mountain Home Awards Winner</h3>
                    </div>
                </li>           
                            </ul>               
    </div>

    <div id="slideshowNav" class="inactive">

                <a id="slideshowNavBtn1" class="active" href="#slide1"></a>     

    </div>

    </div>
</div>

    <div id="footer">



        <div class="secondary">
            <div class="inside clearfix">   
                                    <div class="left"><p>© 2015 <a href="http://www.gallagherconstructiontahoe.com"><strong>Gallagher Construction</strong></a> All Rights Reserved.</p></div>
            <div class="right"><p><a href="/">Home</a> | <a href="/about/">About</a> | <a href="/services/">Services | </a><a href="/portfolio/">Portfolio</a> | <a href="/category/press/">Press</a> | <a href="/category/awards/">Awards</a> | <a href="/contact/">Contact</a></p></div><a href="/contact/">
            </a></div><!-- end footer inside--><a href="/contact/">     
        </a></div><!-- end footer secondary--><a href="/contact/">      

    </a></div><!-- end footer --><a href="/contact/">
</a></div><!-- end container --><a href="/contact/">

    <script type="text/javascript">
         jQuery(document).ready(function ($) {
            $('#tabs').tab();

            $('#accordion2').collapse({
              toggle: true
            });
        }); 
    </script></body>

Answer 1

首先，要从 css 访问 class，您必须这样做：.awards 不是 #awards。您只对 id 使用“#”。

其次 - 您可以这样做：

div h3 {
...
}

这将访问 div 中的所有“h3”。

或者您可以将 class 或 id 添加到 h3

如果您还有其他问题，或者有什么不清楚的地方，请随时提问。

Answer 2

如果您想访问 div 的直系子代并获得奖励 class。

.awards>h3{
...
}

识别奖项下的所有h3标签

.awards h3{
...
}

选择深度嵌套 div

Selecting a deeply nested div

css

css-selectors