0

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

4

3 回答 3

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;
}

由于ul带有 id#ads的元素在带有 id 的#page_left每个元素h5中，因此它会从第二条规则中获得 , , , and ，
color但font-size也会font-weight从letter-spacing第一 条规则中获得, , , and ，因为这两条规则都适用于 that 。对于两个规则中定义的相同属性，它使用更具体的。margin-left

margin-rightmargin-topmargin-bottomwidthpaddingh5

于 2011-03-13T18:42:34.450 回答
0

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

#page_left ul#ads li h5
于 2011-03-14T01:03:22.887 回答
0

你#page_left是压倒一切的，看看这看起来有多么不同：

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

于 2011-03-13T18:34:14.980 回答