0

私は非常に奇妙な問題に直面しています。CSS ">" で理解していることから、セレクターよりも、基本的にスタイルを直接の子のみに適用するということです。しかし、要素に適用されたスタイルをまったく取得できません。奇妙なのは、要素を調べているときに、firebug の他の CSS 部分が表示されるのに、適用された ">" スタイルが表示されないことです。

私が持っているHTMLは次のとおりです。

<div id="navigation">
    <ul>
       <li><a href="#">First</a></li>
       <li><a href="#">Second</a></li>
       <li><a href="#">Third</a></li>
       <li><a href="#">Fourth</a></li>
    </ul>
</div>

CSS部分はこれです：

/* Navigation */
#navigation {
    min-height:45px;
}

#navigation ul {
    list-style-type: none;
    margin: 0px 45px 0px 0px;
    font-weight: bold;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #F3F3F3;
}

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
}

#navigation > ul > li {
    line-height: 26px;
    display: block;
}

#navigation > ul > li > a {
    border-right: 1px solid #F3F3F3;
    color: #333;
    display: block;
    font-family: 'Trebuchet MS';
    font-size: 15px;
    padding: 10px 18px 13px;
    position: relative;
    text-decoration: none;
    z-index: 1000;
}

#navigation > ul > li.current_page_item > a, 
#navigation > ul > li.current_page_parent > a, 
#navigation > ul > li.current_page_ancestor > a {
    border-top: 3px solid #72AC4B;
    color: #72AC4B;
    font-family: 'Trebuchet MS';
    margin-top: -3px;
}

他のすべてのスタイルは通常どおり適用されますが、">" セレクターを使用するスタイル ブロックはまったく認識されません。要素を調べるとli、次のスタイルが適用されていることがわかります。

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
}

しかし、次のスタイルが適用されていることがわかりません。

#navigation > ul > li {
    line-height: 26px;
    display: block;
}

ul の直接の子ですが。誰もこの問題に直面したことがありますか? 何が原因でしょうか?

4

2 に答える 2

0

「display：block」を「display：none」に置き換えました。このスタイルはFirefoxに適用されます。問題はオンラインの高さですが、最終的な設計として何を達成しようとしていますか？スペースを少なくしたい場合は、パディングまたはマージンを変更してみてください。

それが問題ではない場合、あなたが探している最終結果の例を教えてください。

于 2012-10-02T21:25:16.607 に答える
0

あなたが提供した HTML の例が、これらのスタイルを適用しようとしている完全なコードであると仮定すると、直接の子孫セレクター (>) を使用することを保証する競合がどのように発生するかわかりません。

全体に子セレクターを使用するだけです。

/* Navigation */  
#navigation {
    min-height:45px;
}

#navigation ul {
    list-style-type: none;
    margin: 0px 45px 0px 0px;
    font-weight: bold;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #F3F3F3;
}

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
    line-height: 26px;
    display: block;
}

#navigation ul li a {
    border-right: 1px solid #F3F3F3;
    color: #333;
    display: block;
    font-family: 'Trebuchet MS';
    font-size: 15px;
    padding: 10px 18px 13px;
    position: relative;
    text-decoration: none;
    z-index: 1000;
}

#navigation ul li.current_page_item a, 
#navigation ul li.current_page_parent a, 
#navigation ul li.current_page_ancestor a {
    border-top: 3px solid #72AC4B;
    color: #72AC4B;
    font-family: 'Trebuchet MS';
    margin-top: -3px;
}
于 2012-10-02T21:41:45.757 に答える