Usando el selector de último hijo

Mi objetivo es aplicar CSS en el último li, pero no hace eso.

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}

<div id="refundReasonMenu">
    	<ul id="nav">
    		<li><a id="abc" href="#">abcde</a></li>
    		<li><a id="def" href="#">xyz</a></li>
    	</ul>
    </div>

¿Cómo puedo seleccionar solo al último hijo?

La :last-childpseudoclase aún no se puede usar de manera confiable en todos los navegadores. En particular, las versiones de Internet Explorer <9 y Safari <3.2 definitivamente no lo soportan , aunque Internet Explorer 7 y Safari 3.2 hacen de soporte :first-child, con curiosidad.

Su mejor last-childopción es agregar explícitamente una clase (o similar) a ese elemento y aplicar en su li.last-childlugar.

Otra solución que podría funcionar para usted es invertir la relación. Por lo tanto, establecería el borde para todos los elementos de la lista. Luego, usaría first-child para eliminar el borde del primer elemento. El primer hijo es compatible estáticamente en todos los navegadores (lo que significa que no se puede agregar dinámicamente a través de otro código, pero el primer hijo es un selector de CSS2, mientras que el último hijo se agregó en la especificación CSS3)

Nota: Esto solo funciona de la manera que pretendía si solo tiene 2 elementos en la lista como su ejemplo. Se aplicarán bordes a cualquier tercer elemento en adelante.

Si cree que puede usar Javascript, entonces, dado que es compatible con jQuery last-child, puede usar el método css de jQuery y lo bueno es que será compatible con casi todos los navegadores.

Código de ejemplo:

$(function(){
   $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})

Puede encontrar más información aquí: http://api.jquery.com/css/#css2

Si el número de elementos de la lista es fijo, puede usar el selector adyacente, por ejemplo, si solo tiene tres <li>elementos, puede seleccionar el último <li>con:

#nav li+li+li {
    border-bottom: 1px solid #b5b5b5;
}

Si se encuentra buscando con frecuencia selectores CSS3, siempre puede usar la biblioteca selectivizr en su sitio:

http://selectivizr.com/

Es un script JS que agrega soporte para casi todos los selectores CSS3 a navegadores que de otra manera no los admitirían.

Tíralo a tu <head>etiqueta con un condicional de IE:

<!--[if (gte IE 6)&(lte IE 8)]>
  <script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->

la pseudoclase del último hijo no funciona en IE

Compatibilidad CSS e Internet Explorer

Selectores CSS de IE7: cómo fallan

Como alternativa al uso de una clase, puede usar una lista detallada, configurando los elementos dt secundarios para que tengan un estilo y los elementos dd secundarios para que tengan otro. Tu ejemplo se convertiría en:

#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>

Ninguno de los métodos es mejor que el otro y depende de las preferencias personales.

Otra forma de hacerlo es usar el selector de último hijo en jQuery y luego usar el método .css (). Sin embargo, esté cansado porque algunas personas todavía están en la edad de piedra usando navegadores con JavaScript desactivado.

¿Por qué no aplicar el borde en la parte inferior de la UL?

#refundReasonMenu #nav ul
{
    border-bottom: 1px solid #b5b5b5;
}

Si está flotando los elementos, puede invertir el orden

es decir, en float: right;lugar defloat: left;

Y luego use este método para seleccionar el primer hijo de una clase.

/* 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;
}

En realidad, esto está aplicando la clase a la ÚLTIMA instancia solo porque ahora está en orden inverso.

Aquí hay un ejemplo práctico para ti:

<!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>

Es difícil decirlo sin ver el resto de su CSS, pero intente agregar !importantdelante del color del borde, para que sea así:

#refundReasonMenu #nav li:last-child
{
  border-bottom: 1px solid #b5b5b5 !important;
}