Специфика CSS проблема - PullRequest
Новая
       18

Специфика CSS проблема

0 голосов
/ 13 марта 2011

Схожу с ума с 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;
}

Проблема, с которой я сталкиваюсь, заключается в том, что она продолжает использовать css page_left вместо отдельного div css, из-за которого моя страница выглядит странной.

Ответы [ 3 ]

1 голос
/ 13 марта 2011

Вам нужно будет использовать 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;
}

Поскольку ul с идентификатором #ads находится внутри элемента с идентификатором #page_left, каждый h5 в нем получит
color, font-size, font-weight, letter-spacing и margin-left из второго правила
но также получит
margin-right, margin-top, margin-bottom, width и padding с первого раза, потому что оба правила применяются к этому h5. Для одинаковых свойств , определенных в обоих правилах , используются более конкретные значения.

0 голосов
/ 14 марта 2011

Поместите стили #page_left, которые вы хотите переопределить, сверху, а не снизу, так как последние указанные стили (то есть те, которые находятся ниже в таблице стилей) переопределяют те, что выше.Затем попробуйте получить еще более конкретную информацию: 

#page_left ul#ads li h5
0 голосов
/ 13 марта 2011

Ваш #page_left переопределяет все, что находится под ним, посмотрите, как это выглядит по-разному:

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

...