0

私はこのHTMLコードを持っています

<div id="navbar">
    <ul>
        <li><a href="#">Page1</a></li>
        <li><a href="#">page2</a></li>
    <li id="NavItem">
        <a href="#">page3</a>
        <div id="PopOver">
            <div class="ow-button">
                <a href="#">xnewPage1</a>
                <a href="#">xnewPage2</a>
                <a href="#">xnewPage3</a>
            </div>
        </div>
    </li>
        <li><a href="#">page4</a></li>
    </ul>
</div>

CSSコード

#navbar { position: relative; margin: 3px; }
#navbar ul {
    padding: 0;
    margin: auto;
    background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px;
    padding: 4px 0 4px 0;
}
#navbar li { display: inline; margin-right: 80px; }
#navbar li a {
    font-family: EqualSansDemo;
    font-size: 1.6em;
    color: #555555;
    text-shadow: 1px 1px 0px #fff; }
#navbar li a:hover { color: #0071e4; }

#PopOver {
    position:absolute;
    border:2px solid #07B1F1;
    width:170px;
    height:auto;
    padding:15px 5px 10px 5px;
    display:none;
    top:30px;
    left:229px;
    background-color:#FFFFFF;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}

#NavItem:hover #PopOver {display:block}


.ow-button a {
    display: block;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width: 160px;
    height: 28px;
    font-family: Arial, "Nimbus Sans L", "FreeSans";
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    line-height: 28px;
    text-shadow: 1px 1px 1px #6A6A6A;
    text-decoration:none;
    margin: 0px 5px 10px 5px;
    background: #28A9FF;
}

.ow-button a:hover {
    background: #48B6FF;
}

問題：

「#navbar li a」は非表示になります:

font-family: Arial, "Nimbus Sans L", "FreeSans";
font-size: 14px;
color: #FFFFFF;
text-shadow: 1px 1px 1px #6A6A6A;

どの「ow-button a」が持っているか..そしてそれ自身を有効にします。

そして、私はそれを望んでいません...完全な「ow-button a」CSSコードを有効にするにはどうすればよいですか?

4

1 に答える 1

2

手っ取り早い解決策は、 which をオーバーライドするもの!importantを yourに追加することです。ow-button a#navbar li a

より良い解決策は、より適切な範囲の CSS を使用することです。セレクターを使用して、必要な>要素を正確に指定します。あなたの場合、次のようになります。

#navbar > ul > li > a

私はあなたのためにjsFiddleを作りました: http://jsfiddle.net/6NrWF/。

于 2013-04-20T20:19:50.380 に答える