1

これに対するより簡単な解決策はありますか？ホバーしたときに、すべてのナビゲーション リストを異なる背景色で作成したいと考えています。今はid-sで作っています。コードは次のようになります。更新されたコードはhttp://kontaktfotovideo.huを確認できます。

<nav>
  <ul>
    <li><a id="darkcyan" href="#">Link</a></li>
    <li><a id="darkgray" href="#">Link</a></li>
    <li><a id="skyblue" href="#">Link</a></li>
    <li><a id="coral" href="#">Link</a></li>
    <li><a id="sandybrown" href="#">Link</a></li>
    <li><a id="crimson" href="#">Link</a></li>
  </ul>
</nav>

div#navbar {
    background-color: #787878;
} 

div#navbar ul {
    list-style: none;
}

div#navbar ul li {
    float: left;
    width: 16.666666%;  
}

div#navbar a:link,div#navbar a:visited  {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    padding: 0;
    padding: 5px 95px 20px 5px;
    border-right: 1px solid #f2f2f2;
}

#darkcyan:hover, #darkcyan:active {
    background-color: #00a78d;
}

#darkgray:hover, #darkgray:active {
    background-color: #b995c5;
}

#skyblue:hover, #skyblue:active {
    background-color: #7db6d3;
}

#coral:hover, #coral:active {
    background-color: #f68e51;
}

#sandybrown:hover, #sandybrown:active {
    background-color: #f9d855;
}

div#navbar #crimson:link, div#navbar  #crimson:visited {
    border-right: #787878;
}

#crimson:hover, #crimson:active {
    background-color: #db343b;
}
4

1 に答える 1

2

nth-child セレクターを使用できます。

相互互換性: http://caniuse.com/#feat=css-sel3

JSFiddle: http://jsfiddle.net/2HmUk/

CSS:

nav ul li:nth-child(1) a { color: orange; }
nav ul li:nth-child(2) a { color: red; }
nav ul li:nth-child(3) a { color: green; }
nav ul li:nth-child(4) a { color: brown; }
nav ul li:nth-child(5) a { color: yellow; }
nav ul li:nth-child(6) a { color: purple; }

ホバーするには、:hoverセレクターを追加するだけです: http://jsfiddle.net/2HmUk/1/

nav ul li:nth-child(1) a:hover { color: orange; }

次の場合もあります。

nav ul li:nth-child(1):hover a { color: orange; }
于 2013-06-04T16:15:24.447 に答える