选择深度嵌套的div
选择深度嵌套的div
提问于 2015-01-28 05:51:54
我想将div id=“奖励”的内联样式移到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. 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>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-28 05:54:27
首先，要从css访问类，您必须这样做：.awards而不是#awards。您只对id使用“#”。
第二，要么你可以：
div h3 {
...
}它将进入所有的h3在分区。
也可以向h3中添加类或id。
如果你还有问题，或者有什么不清楚的地方，可以随便问。
Stack Overflow用户
发布于 2015-01-28 05:57:38
如果要使用奖励类访问div的直接子级，请执行以下操作。
.awards>h3{
...
}标识奖励项下的所有h3标记
.awards h3{
...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28185543
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号