change navbar font size phonegap

Question

I'm trying to set the font size of a navigation bar in my phonegap application. Even I've changed the font size in all the css styles that are applied to the navbar, the font size of the text buttons has not change. If I run the code on the web navigator, the font size is changed.

This is the html code:

<div data-role="navbar" class="nav-index" >
<ul>
<li><a href="javascript:p_menuVenta_main()" data-theme="c" data-icon="custom"
 id="venta">Venta</a></li> 
 <li><a href="p_pedido.html" data-theme="c" data-icon="custom" id="pedido">Pedidos</a>
</li>
<li><a href="" data-theme="c" data-icon="check">Liquidacion</a></li>
<li><a href="" data-theme="c" data-icon="info">Consultas</a></li>
</ul>

And this is the css code:

.index-footer .ui-btn .ui-btn-inner {
padding-top: 40px !important; 
}
.nav-index .ui-btn .ui-icon { 
width: 45px!important; 
height: 35px!important; 
margin-left: -24px !important; 
box-shadow: none!important; 
-moz-box-shadow: none!important; 
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important; 
font-size: 12px;
}
#venta .ui-icon { 
background-image: url('images/venta.png');
background-repeat: no-repeat;
background-color: transparent;
background-position:center ;
}
#pedido .ui-icon { 
background-image: url('images/pedidos.png');
background-repeat: no-repeat;
background-color: transparent;
background-position: center ;
}
.ui-navbar .ui-btn-text  {
font-size: 6px;
}
.nav-index .ui-btn-text  {
font-size: 6px;
}

Thanks in advance

Answer 1

Solved. I was accesing in the wrong way to the selector. Here is the correct way:

#p_menuConsultas #menuPequenyo span{}