特殊性 CSS 问题

Question

CSS 有特殊性问题，让人抓狂。 HTML。

    <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，这导致我的页面看起来很奇怪。

Answer 1

您需要对这些规则使用 ul#ads li ... 而不是仅 #ads ...，以使您的规则更加具体。

更具体的规则并不意味着仅适用它。这意味着该规则中指定的属性比也适用于该元素的其他规则更重要。

因此，您需要重置您不关心的 #page_left 规则中设置的属性（除非您在 #ads 规则中覆盖它们）。

IE。

#page_left ul li h5 {
    color: #5B8172;
    font-size: 18px;
    margin: 10px 0 0 9px;
    padding: 2.5px 0 3px 10px;
    width: 300px;
}

由于

ul#ads li h5 {
    color: #370202;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -1px;
    margin-left: 13px;
}

id 为 #ads 的 ul 位于 id 为 #page_left 的元素内，因此其中的每个 h5 都会得到

颜色、字体大小、字体粗细、字母间距和margin-left 来自第二条规则，
但也会得到
margin-right、margin-top、margin-bottom、width 和 padding从第一个开始，因为这两个规则都适用于该 h5。对于在两个规则中定义的相同属性，它使用更具体的属性。

Answer 2

您的 #page_left 覆盖了它下面的所有内容，看看它看起来有多么不同：

http://jsfiddle.net/Mutant_Tractor/tQuUw/1/

Answer 3

将要覆盖的 #page_left 样式放在顶部，而不是底部，因为最后指定的样式（因此是样式表下方的样式）会覆盖上方的样式。然后，尝试变得更具体：

#page_left ul#ads li h5