役に立つ:nth-childの秘方、結合してmenuをします

回転元:http://www.qianduan.net/useful-nth-child-recipies.html ,勉強するだけで
 
私が完璧に使いたいとき:nth-childあるいは:nth-of-typeは少しめまいがします.それらを理解すればするほど、良いCSSルールを書くことができます!
これらの簡単な「レシピ」(実際には式)では、簡単なリストを繰り返し使用し、数字を選択します.しかし、類似のセレクタを得るためにそれらを変更することは明らかである.
5番目の要素のみ選択

1
2
3

li:nth-child(5){
	color: green;
}

最初の要素を選択するには、first-childを使用するか、上記の例を変更して実現できると信じています.
前の5つ以外のすべての要素を選択

li:nth-child(n+6){
	color: green;
}

10以上の要素がある場合は、5以上が選択されます.
前の5つだけ選択

1
2
3

li:nth-child(-n+5){
	color: green;
}

最初から4番目を選びます

1
2
3
4

li:nth-child(4n-7) {
	/* or 4n+1 */
	color: green;
}

奇数または偶数を選択

1
2
3

li:nth-child(odd){
	color: green;
}

1
2
3

li:nth-child(even){
	color: green;
}

もちろんここにも2つの実現があります.あなたは知っています.神飛
最後の要素を選択

1
2
3

li:last-child {
	color: green;
}

最後から2番目を選択

1
2
3

li:nth-last-child(2){
	color: green;
}

この例から,上記の例にも第2の実現方法があることがわかる.
ブラウザのサポート
興味深いことに、first-childと:last-childはIE 7にサポートされていますが、IE 9が残りのセレクタをサポートしていることを知っています.IEを心配している場合は、Selectivizrを使用することができます.ブラウザの互換性が重要な場合は、When can I use…に注目してください.
ええと、CSS 3セレクタを使うのは面白いことで、簡単な数学の問題をするようです.
CSS 3セレクタの詳細については、征服高級CSSセレクタを参照してください.
 
 
 
*************************************************
自分の例を結びつけて、jsp:includeとjsp:param
leftmenu.jspページ

<dl class="sidemenu">
    <dt><a href="javascript:void(0)">    </a></dt>
	<dd><a href="${base}/orderlist.html">    </a></dd>
    <dd><a href="${base }/vcoinlist.html">V   </a></dd>
    <dd><a href="${base }/giftlist.html">    </a></dd>
    <dd><a href="${base }/scorelist.html">    </a></dd>
    <dd><a href="${base }/security.html">    </a></dd>
</dl>
<script type="text/javascript">
$(function(){
	$(".sidemenu dd:nth-child("+${param.curSel}+")").addClass("current").siblings().removeClass("current");
});
</script>

scorelist.jsp

	<div id="leftside">
			<jsp:include page="/WEB-INF/account/include/leftmenu.jsp" >
				<jsp:param value="2" name="curSel" />
			</jsp:include>
		</div>