1

私のhtmlページには、idフッターを持つdivがあります。その中には他のいくつかの div があり、最後の 1 つには内部に p-tag があります。その p に css スタイルを適用するにはどうすればよいですか?

#footer div p {
    background-color: #000;
}

#footer div {
    float: left;
    width: 23%;
    border-left: solid 1px;
    margin: 0;
    padding-left: 5px;
}

最初のものは2番目のものを上書きしていないようで、うまくいきます。特に css セレクターの順序に関する情報をどこで見つけることができるか、ヒントを教えてもらえますか?

4

2 に答える 2

1

セレクターを使用して:last-child、最後の div とそれに含まれる<p>タグをターゲットにすることができます。

footer div:last-child p{color:#f00;}

ここにフィドルの例があります - http://jsfiddle.net/vuGpt/

そして、ここにいくつかのさらなる読書があります - http://www.w3schools.com/cssref/css_selectors.asp

作成する順序を除いて、CSS セレクターに実際の順序はありません。後で CSS で同じ要素を選択すると、定義したスタイルが上書きされます。要素を選択する方法に注意する必要があります。一般的なセレクターは、より具体的なセレクターによってオーバーライドされます。たとえば、次のように定義した場合

p{color:#0f0;}

次に、このセレクターは、上記で定義したより直接的なセレクターによってオーバーライドされます。これを克服するため!importantに、ルールに追加できます。そうすれば、後で上書きされても、そのスタイルが適用されることを合理的に確信できます。誤って!important再度使用しない限り。それは非常にすぐに混乱する可能性があり、適切に記述された CSS を使用すると、使用をまったく避けることができます!important...

上記の結果の CSS は次のようになります。

footer div:last-child p{color:#f00 !important;}

お役に立てれば...

于 2013-07-11T07:54:35.957 に答える
0

Your CSS is fine. I would suggest checking the structure of your HTML. From the CSS you provided the HTML should look as below:

    <div id="footer">
        <div></div>     
        <div>
            <p>My paragraph</p>
        </div>
    </div>

I have tested this and all appears kosher. See fiddle.

于 2013-07-11T08:04:10.403 に答える