回答:
:last-child擬似クラスはまだ確実にブラウザ間で使用することはできません。具体的には、Internet Explorerのバージョン<9、およびSafari <3.2は間違いなく、それをサポートしていないのInternet Explorer 7とSafari 3.2が、 やるのサポートを:first-child不思議、。
あなたの最善の策は、last-childそのアイテムに（または同様の）クラスを明示的に追加し、li.last-child代わりに適用することです。
:last-child。
あなたのために働くかもしれないもう一つの解決策は関係を逆にすることです。したがって、すべてのリストアイテムに境界線を設定します。次に、first-childを使用して、最初のアイテムの境界線を削除します。最初の子はすべてのブラウザーで静的にサポートされます（つまり、他のコードで動的に追加することはできませんが、最初の子はCSS2セレクターですが、最後の子はCSS3仕様で追加されました）。
注：これは、例のようにリストに2つの項目しかない場合にのみ、意図したとおりに機能します。3番目以降のアイテムには、境界線が適用されます。
あなたがJavascriptを使用できると思うなら、jQueryサポート以来 last-child、jQueryのcssメソッドを使用できます。これにより、ほとんどすべてのブラウザーがサポートされます。
コード例：
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})ここに関する詳細情報を見つけることができます：http : //api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')は、スタイルシートでスタイルを維持できるようにするのに適しています。
div:last-childを含むクラスをロードしませんdiv.last-child。:last-child構文が無効であると見なされ、その疑似セレクターを持つクラスは適用されないようです。
リストアイテムの数が固定されている場合は、隣接するセレクターを使用できます。たとえば、3つの<li>要素しかない場合は、最後のセレクターを選択できます<li>。
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav li選択します。セレクタは単にである必要があります。li#navli#nav li + li + li
CSS3セレクターを頻繁に必要とする場合は、サイトで常にselectivizrライブラリを使用できます。
これは、他の方法ではサポートされないCSS3セレクターのほとんどすべてをブラウザーにサポートするJSスクリプトです。
<head>IE条件付きでタグにスローします。
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->クラスを使用する代わりに、詳細リストを使用して、子dt要素に1つのスタイルを設定し、子dd要素に別のスタイルを設定することもできます。あなたの例は次のようになります：
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}html：
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>どちらの方法も他の方法より優れているわけではなく、個人の好みにかかっています。
要素をフローティングしている場合は、順序を逆にすることができます
すなわち float: right;代わりにfloat: left;
次に、このメソッドを使用して、クラスの最初の子を選択します。
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}これは実際には、クラスが最後のインスタンスに適用されています。これは、クラスが逆の順序になっているためです。
ここにあなたのための実用的な例があります：
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
:last-child。そして、それはありませんという好奇心。:first-childCSS2疑似クラス、:last-childCSS3疑似クラスです。