1

サイトの新しいヘッダー デザインを作成しており、1 つの問題を除いてすべて解決されています。何らかの理由で、クラスでnth-child(1)orfirst-childまたはを使用しようとすると、選択した要素ではなく、すべてのリンクにルールが適用されます。私の要点を示すために、jsfiddle を使用して以下のコードを投稿します。last-childnavLink

http://jsfiddle.net/rg7fe/

HTML

<ul id="nav">
    <li class="navItem"><a class="navLink" href="#">Test</a></li>
</ul>

CSS

#nav {
    background: RGB(200, 230, 240);
    border-bottom: 1px solid RGB(0, 0, 0);
    height: 30px;
    margin: 0 auto;
    position: relative;
    width: 980px;
    z-index: 5;
}

.navItem {
    display: block;
    float: left;
    position: relative;
 }

.navLink:first-child {
    border-left: 1px solid RGB(0, 0, 0);
}

.navLink {
    border-bottom: 1px solid RGB(0, 0, 0);
    border-right: 1px solid RGB(0, 0, 0);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    white-space: nowrap;
}

.navItem:hover .navLink {
    background: RGB(120, 200, 250);
    color: RGB(255, 255, 255);
 }
4

2 に答える 2

3

<li>nth-child をnotに適用する必要があります 。<a>これは、 の最初、最後、および最初の子です<li>。

.navItem:first-child a{
    border-left: 1px solid RGB(0, 0, 0);
}

.navItem a{
    border-bottom: 1px solid RGB(0, 0, 0);
    border-right: 1px solid RGB(0, 0, 0);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    white-space: nowrap;
}
于 2013-07-12T15:45:19.250 に答える
1 
.navItem:first-child .navLink {
    border-left: 1px solid RGB(0, 0, 0);
}

これを使って。メソッドの問題は、 .navLink:first-child がすべてのアイテムである .navItems に対して最初の子を計算していることです。あなたが要点を得たことを願っています。

于 2013-07-12T15:50:14.077 に答える