我想将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. 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>
答案 0 :(得分：1)
首先，要从css访问一个类，你必须这样做：.awards
不是#awards。您只能使用＆＃39;＃＆＃39;仅限id。
第二 - 你能做到：
div h3 {
...
}
将访问div中的所有＆＃39; h3。
或者你可以在h3
中添加一个类或id如果您有任何问题，或者某些事情不清楚，请随时提出。
答案 1 :(得分：0)
如果你想通过奖励课程访问div的直接孩子。
.awards>h3{
...
}
识别奖项下的所有h3标签
.awards h3{
...
}