html - 特异性 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 中覆盖它们规则)。

即。

#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会得到
color、font-size、font-weight、letter-spacing 和 margin-left来自第二条规则，
但也会得到
margin-right、margin-top、margin-bottom、width 和 padding从一开始，因为这两个规则都适用于 h5。对于在两个规则中定义的相同属性，它使用更具体的。