0
与具有特定性问题的CSS疯狂。 HTML。特定性CSS问题
<div id="page_content">
<div id="page_left" class="left">
<div id="domain_l_top">
<ul>
<li>
<p>.co.uk</p>
<p>£3.99</p>
<p class="peryear">per year</p>
</li>
<li>Free with selected packages</li>
</ul>
<form id="form" action="...">
<input class="searchdomains" type="text" name="domain" id="search-domain-input">
<input id="submit" type="image" src="..." class="search" name="Search">
<input type="hidden" name="direct" value="true" />
</form>
</div>
...
<ul id="ads" class="ads">
<li>
<a href="" title="Transfer to Amazing Host">
<img src="..." alt="Transfer to Amazing Host" />
<h5>Transfer to Amazing Host</h5>
<p>Get all the great services that you get when registering a domain with us. Free transfers for all .co.uk domains.</p>
</a>
</li>
<li>
<a href="" title="Free one year renewal">
<img src="..." alt="FREE .com" />
<h5>FREE .com</h5>
<p>Transfer your .com name to us and we will give a years renewal for FREE. Transfer now for £6.50.</p>
</a>
</li>
<li>
<a href="" title="Add Hosting">
<img src="..." alt="Add Hosting" />
<h5>Add Hosting</h5>
<p>We have great hosting packages, add hosting with your transfer and get 20% OFF selected packages.</p>
</a>
</li>
</ul>
</div>
</div>
的.css
#page_left {
width: 660px;
padding: 5px;
}
#page_left h2 {
border-bottom: 2px solid #5B8172;
color: #5B8172;
font-size: 26px;
margin: 10px 0 0 4px;
padding: 2.5px 0 3px 5px;
text-shadow: 1px 1px 1px #2D4038;
width: 645px;
}
#page_left h4 {
color: #5B8172;
font-size: 20px;
margin: 10px 0 0 4px;
padding: 2.5px 0 3px 5px;
width: 645px;
}
#page_left p {
font-size: 14px;
margin: 10px 0 0 4px;
padding: 2.5px 0 3px 5px;
width: 645px;
}
#page_left ul li h5 {
color: #5B8172;
font-size: 18px;
margin: 10px 0 0 9px;
padding: 2.5px 0 3px 10px;
width: 300px;
}
#page_left ul li p {
font-size: 14px;
margin: 10px 0 0 9px;
padding: 2.5px 0 3px 10px;
width: 645px;
}
#page_left h3 {
border-bottom: 2px solid #5B8172;
color: #5B8172;
font-size: 24px;
margin: 10px 0 0 4px;
padding: 2.5px 0 3px 5px;
text-shadow: 1px 1px 1px #2D4038;
width: 645px;
}
#ads{
display: inline;
float: left;
margin: 10px;
width: 660px;
}
#ads li{
border: 1px solid #2104FA;
float: left;
margin-right: 5px;
padding: 5px;
width: 200px;
height: 140px;
}
#ads li a {
color: #370202;
cursor: pointer;
display: block;
text-decoration: none;
}
#ads img {
float: left;
margin: 0 10px 10px 0;
}
#ads h5 {
color: #370202;
font-size: 18px;
font-weight: bold;
letter-spacing: -1px;
margin-left: 13px;
}
#ads li p {
font-size: 12px;
line-height: 1.3em;
margin:0;
padding: 2.5px;
width: 180px;
}
#domain_l_top{
background: url(../img/domain_bg_1.png) repeat-x scroll center top #FFFFFF;
height: 180px;
width: 100%;
overflow:hidden;
}
#domain_l_top ul {
display: inline;
float: right;
margin: 37px 30px 0 0;
}
#domain_l_top ul li {
color: #FFFFFF;
float: left;
font-size: 24px;
font-weight: bold;
letter-spacing: -1px;
line-height: 80%;
margin: 0;
margin-bottom: 2px;
padding: 0 15px;
text-align: center;
text-shadow: 1px 1px #000000;
list-style: none;
}
#domain_l_top form {
float: right;
height: 40px;
margin: 5px;
width: 425px;
}
#domain_l_top .searchdomains {
border: 0 none;
color: #8D867E;
float: left;
font-size: 14px;
margin-top: 5px;
outline: medium none;
width: 325px;
}
#domain_l_top .search {
background: url("../img/search_btn.png") no-repeat scroll center top transparent;
float: right;
margin: 5px 58px 0 0;
width: 23px;
}
#domain_l_top .search:hover {
background: url(../img/search_btn.png) no-repeat scroll 0 -20px #FFFFFF;
}
我遇到的问题是，它不断使用PAGE_LEFT CSS来代替，这是造成我的网页看起来奇怪的单独的DIV + CSS。
这是很多代码。你可以更具体一些（如果你会赦免双关语:)关于哪些规则被错误应用，或者显示一个[JSFiddle]（http://jsfiddle.net）的例子？ – 2011-03-13 18:32:16
@Pekka看起来'＃page_left'覆盖了所有内容：http://jsfiddle.net/Mutant_Tractor/tQuUw/1/ – 2011-03-13 18:35:02