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规则中覆盖它们）。< / p>

即

#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的{{1}}位于ID为#ads的元素内，因此每个#page_left都会获得来自第二条规则的h5，color，font-size，font-weight和letter-spacing，
但也会得到首先是margin-left，margin-right，margin-top，margin-bottom和width，因为这两条规则都适用于padding。对于在两个规则中定义的相同属性，它使用更具体的属性。

Answer 2

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

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

Answer 3

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

#page_left ul#ads li h5

特殊性CSS问题

3 个答案: