css - CSS のネストの問題

Question

例を示すためにフィドルを作成しました。親 CSS を設定してから、子の CSS を適用すると思います。しかし、それは無視されているようです。

http://jsfiddle.net/8PWNw/2/

<div id="displaybox" class ="displaybox" style="display: none;">
    <div class = "parent" >
        <a href="reply.php?id=1">Parent 1</a>
    </div>
    <span  class ="child"  style="padding: 0 10 "><a href="reply.php?id=3">Child 1</a></span>
    <div class = "parent" >
        <a href="reply.php?id=2">Parent 2</a>
    </div>
    <span  class ="child"  style="padding: 0 10 "><a href="reply.php?id=4">Child 1</a></span>
</div>

お知らせ下さい。私はCSSを初めて使用するので、学ぶ必要があることがたくさんあります。

Answer 1

CSS の 23 行目:

/* this is actually saying element with both 'parent' and 'a' class */

    .displaybox .parent.a {
        color: black; 
    }

あなたはおそらく次のことを意味していました：

/* this is actually saying all 'A' elements within element with 'parent' class */

    .displaybox .parent a {
        color: black; 
    }

そのため、「A」要素スタイルは無視されています。

Answer 2

padding: 0 10有効ではない (バリデーターを使用する) ため、ブラウザーはそれを無視する必要があります。

ゼロ以外の長さには、単位 (pxまたは などem) が必要です。

display: noneただし、すべてが隠されているため、これを伝えることはできません。