Tengo el siguiente codigo HTML:
<!DOCTYPE html><!-- no-cache -->
<html>
<head>
<title>Ficha de Inventarios</title>
</head>
<body><!--sii.load head -->
<link href="/js/utils_jqu.css" rel="stylesheet">
<link href="/js/metro/sinfonix.css" rel="stylesheet">
<style>
.title {
text-decoration: none;
color:#fff;
font-size:25px;
}
</style>
<body onload="onLoad()" style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="3" width="100%">
<tr>
<td nowrap width="1"
><a href='javascript:writeDocument("Nuevo","OFF","");'
><img border="0" name="m11" src="/images/metro_file_new.png" title="Nuevo Documento" ></a></td>
<td nowrap width="1"
><a href='javascript:writeDocument("Acepta","OFF","");'
><img border="0" name="m12" src="/images/metro_file_write.png" title="Guardar Documento" ></a></td>
<td nowrap width="1"
><a href='javascript:writeDocument("Elimina","OFF","");'
><img border="0" name="m20" src="/images/metro_file_delete.png" title="Eliminar Documento" ></a></td>
<td nowrap width="1"
><a href='javascript:verifidForm("myForm.reset()");'
><img border="0" name="m14" src="/images/metro_file_undo.png" title="Deshacer Cambios" ></a></td>
<td nowrap width="1"
><a href='javascript:writeDocument("Acepta","PRINT","");'
><img border="0" name="m13" src="/images/metro_file_print.png" title="Imprimir (Ctrl+P)" ></a></td>
<td nowrap width="1"
><a href='javascript:writeDocument("Acepta","ON","");'
><img border="0" name="m23" src="/images/metro_file_preview.png" title="Formato Imprimible"></a></td>
<td nowrap align="right"><a class="title" href="javascript:CallSQL('^CIA.sql','list','','LoadCompany','key%20codigo%20nombre');">Compañia de Prueba, S.A. </a></td>
</tr>
</table>
<script>
function writeDocument(button, preview) {
if (myForm) {
switch (preview) {
case "PRINT":
if (myForm.preview) {
if (window.submit) {
window.submit(button, preview);
}
} else {
window.print();
}
default:
window.submit(button, preview);
}
} else {
window.parent.location.reload(true);
}
}
</script>
<div id="main" style="position: relative; visibility: hidden; width:100%">
<form action="/cgi-bin/sinfonix.pl?AD-0354464104726F6F7403323535023937%20IN630.www" method="POST" enctype="multipart/form-data" name="myForm" target="connect9">
<div align="center">
<table class="Main">
<tr>
<td>
<table class="Head" width="100%">
<tr>
<td valign="bottom">
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td nowrap valign="top">Código de Producto<br>
<input size="20" maxlength="20" name="codigo" value="" onchange="javascript:CallSQLproducto('record');" class="search_IN630"
> <a href="javascript:CallSQLproducto('list');"
><img src="/images/search_list.png" title="Selecciona el Producto de una Lista" align="absmiddle" border="0"></a></td>
<td>Línea de Ventas<br>
<select name="LineaVenta" size="1">
<option></option>
<option value="30303031">DUROTEST - ILUMINACION LARGA N</option>
<option value="39313030">CONSUMIBLES</option>
<option value="39393939">CONSUMIBLES SERVICIO TECNICO</option></select></td>
</tr>
</table></td>
<td align="center"><span class="title">FICHA DE INVENTARIO</span><br>
<a class="font-normal" href="javascript:CallSQL('^INV.sql','list','','LoadInvent','key%20codigo%20nombre');">
(MERCANCIA PARA LA VENTA)</a></td>
</tr>
</table>
<table class="Body" id="Body">
<tr>
<td valign="top"><span class="title">Datos Básicos</span>
<table border="0" cellspacing="5">
<tr>
<td valign="top" nowrap align="center"
><img id="foto" src="/cgi-bin/sinfonix_image.pl?AD-0354464104726F6F7403323535023937%20^IMAGE.www%20647F616836273123212D3B317F3D2C25262C3E6E32362B2D6829263C2C223D22.jpg" align="absbottom" border="0" style="width:82 height:82" width="82" height="82" data-file="#file_image"> </td>
<td valign="top" nowrap align="center"
>
<table border="0" cellspacing="5">
<tr>
<td>
Descripción</td>
<td style="width:330px">
<input type="text" size="30" maxlength="30" name="Descripcion" value="" style="width: 100%"></td>
<td style="width:50px"> </td>
<td>
Existencia Mínima</td>
<td>
<input type="text" size="13" name="ExistMinima" value="" style="text-align: right; width: 240px" maxlength="9"> </td>
</tr>
<tr>
<td>Descripcion 2</td>
<td><input type="text" size="10" maxlength="10" name="refer_data_1" value="" style="width:100%"></td>
<td> </td>
<td>Existencia Máxima</td>
<td>
<input type="text" size="13" name="ExistMaxima" value="" style="text-align: right; width: 240px" maxlength="9"> </td>
</tr>
<tr>
<td>No.de Parte</td>
<td><input type="text" size="20" maxlength="20" name="refer_data_2" value="" style="width:100%"></td>
<td> </td>
<td>Cantidad a Pedir</td>
<td>
<input type="text" size="13" name="CantPedir" value="" style="text-align: right; width: 240px" maxlength="9"> </td>
</tr>
<tr>
<td>Descripcion US</td>
<td><input type="text" size="30" maxlength="30" name="refer_data_3" value="" style="width:100%"></td>
<td> </td>
<td>Catalogo y Pagina</td>
<td>
<input type="text" size="5" name="Catalogo" value="" style="text-align: right; width: 117px" maxlength="2">
<input type="text" size="7" name="Pagina" value="" style="text-align: right; width: 116px" maxlength="4"> </td>
</tr>
<tr>
<td>Descripcion US2</td>
<td><input type="text" size="10" maxlength="10" name="refer_data_4" value="" style="width:100%"></td>
<td> </td>
<td>Referencia</td>
<td><select name="refer_data_5" size="1" style="width:100%"><option></option>
<option value="31">TABLA 1</option>
<option value="32">TABLA 2</option></select></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<div id="tabs-content" class="tabs-resizer" style="padding:5px; width:989px; height:419px">
<div id="tabs">
<ul>
<li><a href="#Precios">Listas de Precios y Unidades de Medidas</a></li>
<!--sii.if 1 -->
<li><a href="#Proveedores">Modelos de los Proveedores</a></li>
<!--sii.fi -->
<!--sii.if 1 -->
<li><a href="#Adicionales">Datos Adicionales</a></li>
<!--sii.fi -->
</ul>
<div id="Precios" style="padding:0px" align="center">
<table class="Body" width="100%" height="100%">
<tr>
<td valign="top"><span class="title">Listas de Precios</span><div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="LN" nowrap>Descripción</th>
<!--sii.for 5 -->
<th class="LN" nowrap colspan="2">PRECIO 1</th>
<!--1 next -->
<th class="LN" nowrap colspan="2">PRECIO 2</th>
<!--2 next -->
<th class="LN" nowrap colspan="2">PRECIO 3</th>
<!--3 next -->
<th class="LN" nowrap colspan="2">PRECIO 4</th>
<!--4 next -->
<th class="LN" nowrap colspan="2">PRECIO 5</th>
<!--5 next -->
</tr>
<tr>
<td nowrap align="right">Precio de Venta </td>
<!--sii.for 5 -->
<td nowrap align="right" colspan="2">
<input type="text" size="12" name="Pventa_Valor1" value="" maxlength="13" style="text-align: right;width:95px"></td>
<!--1 next -->
<td nowrap align="right" colspan="2">
<input type="text" size="12" name="Pventa_Valor2" value="" maxlength="13" style="text-align: right;width:95px"></td>
<!--2 next -->
<td nowrap align="right" colspan="2">
<input type="text" size="12" name="Pventa_Valor3" value="" maxlength="13" style="text-align: right;width:95px"></td>
<!--3 next -->
<td nowrap align="right" colspan="2">
<input type="text" size="12" name="Pventa_Valor4" value="" maxlength="13" style="text-align: right;width:95px"></td>
<!--4 next -->
<td nowrap align="right" colspan="2">
<input type="text" size="12" name="Pventa_Valor5" value="" maxlength="13" style="text-align: right;width:95px"></td>
<!--5 next -->
</tr>
<tr>
<td nowrap align="right">Comisión Base </td>
<!--sii.for 5 -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_CBF1" value="" maxlength="1" style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_CBM1" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--1 next -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_CBF2" value="" maxlength="1" style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_CBM2" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--2 next -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_CBF3" value="" maxlength="1" style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_CBM3" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--3 next -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_CBF4" value="" maxlength="1" style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_CBM4" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--4 next -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_CBF5" value="" maxlength="1" style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_CBM5" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--5 next -->
</tr>
<tr>
<td nowrap align="right">Dscto.Máximo </td>
<!--sii.for 5 -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_DMF1" value="" maxlength="1" style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_DMM1" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--1 next -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_DMF2" value="" maxlength="1" style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_DMM2" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--2 next -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_DMF3" value="" maxlength="1" style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_DMM3" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--3 next -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_DMF4" value="" maxlength="1" style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_DMM4" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--4 next -->
<td nowrap align="left">
<input type="text" size="1" name="PVenta_DMF5" value="" maxlength="1" style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
<td nowrap align="right">
<input type="text" size="10" name="PVenta_DMM5" value="" maxlength="10" style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--5 next -->
</tr>
</table></div></td>
<td valign="top"><div align="center"><span class="title">Unidad de Medida</span>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="LN" nowrap>Codigo</th>
<th class="LN" nowrap>Base de Calculo</th>
</tr>
<!--sii.for 3 -->
<tr>
<td align="center" nowrap>
<select name="UND_codigo1" size="1">
<option></option>
<option value="424C">BLOCK</option>
</select></td>
<td align="center" nowrap>
<input type="text" size="13" name="UND_Base1" value="" style="text-align: right" maxlength="8" ></td>
</tr>
<!--1 next -->
<tr>
<td align="center" nowrap>
<select name="UND_codigo2" size="1">
<option></option>
<option value="424C">BLOCK</option>
</select></td>
<td align="center" nowrap>
<input type="text" size="13" name="UND_Base2" value="" style="text-align: right" maxlength="8" ></td>
</tr>
<!--2 next -->
<tr>
<td align="center" nowrap>
<select name="UND_codigo3" size="1">
<option></option>
<option value="424C">BLOCK</option>
</select></td>
<td align="center" nowrap>
<input type="text" size="13" name="UND_Base3" value="" style="text-align: right" maxlength="8" disabled></td>
</tr>
<!--3 next -->
</table></div></td>
</tr>
</table></div>
<!--sii.if 1 -->
<div id="Proveedores" style="padding:0px" align="center">
<table class="Body" width="100%" height="100%">
<tr>
<td valign="top"><span class="title">Proveedores</span>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="LN" nowrap>Código</th>
<th class="LN" nowrap>Nombre o Razón Social del Proveedor</th>
<th class="LN" nowrap>Modelo</th>
</tr>
<!--sii.for 7 -->
<tr>
<td nowrap>
<input type="text" size="10" name="PROV_Codigo1" value="" onchange="javascript:LINE='1';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
<td nowrap>
<input type="text" size="50" name="PROV_Nombre1" value="" disabled></td>
<td nowrap>
<input type="text" size="22" name="PROV_Modelo1" value="" maxlength="20"></td>
</tr>
<!--1 next -->
<tr>
<td nowrap>
<input type="text" size="10" name="PROV_Codigo2" value="" onchange="javascript:LINE='2';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
<td nowrap>
<input type="text" size="50" name="PROV_Nombre2" value="" disabled></td>
<td nowrap>
<input type="text" size="22" name="PROV_Modelo2" value="" maxlength="20"></td>
</tr>
<!--2 next -->
<tr>
<td nowrap>
<input type="text" size="10" name="PROV_Codigo3" value="" onchange="javascript:LINE='3';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
<td nowrap>
<input type="text" size="50" name="PROV_Nombre3" value="" disabled></td>
<td nowrap>
<input type="text" size="22" name="PROV_Modelo3" value="" maxlength="20"></td>
</tr>
<!--3 next -->
<tr>
<td nowrap>
<input type="text" size="10" name="PROV_Codigo4" value="" onchange="javascript:LINE='4';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
<td nowrap>
<input type="text" size="50" name="PROV_Nombre4" value="" disabled></td>
<td nowrap>
<input type="text" size="22" name="PROV_Modelo4" value="" maxlength="20"></td>
</tr>
<!--4 next -->
<tr>
<td nowrap>
<input type="text" size="10" name="PROV_Codigo5" value="" onchange="javascript:LINE='5';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
<td nowrap>
<input type="text" size="50" name="PROV_Nombre5" value="" disabled></td>
<td nowrap>
<input type="text" size="22" name="PROV_Modelo5" value="" maxlength="20"></td>
</tr>
<!--5 next -->
<tr>
<td nowrap>
<input type="text" size="10" name="PROV_Codigo6" value="" onchange="javascript:LINE='6';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
<td nowrap>
<input type="text" size="50" name="PROV_Nombre6" value="" disabled></td>
<td nowrap>
<input type="text" size="22" name="PROV_Modelo6" value="" maxlength="20"></td>
</tr>
<!--6 next -->
<tr>
<td nowrap>
<input type="text" size="10" name="PROV_Codigo7" value="" onchange="javascript:LINE='7';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
<td nowrap>
<input type="text" size="50" name="PROV_Nombre7" value="" disabled></td>
<td nowrap>
<input type="text" size="22" name="PROV_Modelo7" value="" maxlength="20"></td>
</tr>
<!--7 next -->
</table></center></div></td>
</tr>
</table></div>
<!--sii.fi -->
<!--sii.if 1 -->
<div id="Adicionales" style="padding:0px">
<table class="Body" width="100%" height="100%">
<tr>
<td valign="top"><span class="title">Datos Adicionales</span>
<div align="center"><center>
<table border="0" cellspacing="5">
<!--sii.for 1 -->
<tr>
<td>Numero de Parte </td>
<td><input type="text" size="3" maxlength="1" name="ref_data_1" value="" ></td>
</tr>
<!--1 next -->
</table></center></div></td>
</tr>
</table></div>
<!--sii.fi -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style="display:none;">
<input type="hidden" name="button" value="">
<input type="hidden" name="config" value="00000009494E3633302E77777700000003000000">
<input type="file" name="file_image" id="file_image" onchange="photoChange('#foto', event );">
<input type="text" name="file_image_delete" id="file_image_delete" onchange="photoChange('#foto','DELETE');">
</div>
</form><!--sii.load copyright -->
</div>
<iframe name="connect9" src="/html/licenced.txt" style="display:none"></iframe>
<div class="loading_modal"></div>
</body>
<!-- jQuery core -->
<script src="../js/jquery/jquery-2.2.1.min.js"></script>
<!-- Sinfonix core -->
<script src="../js/utils.js"></script>
<script src="../js/utils_jqu.js"></script>
<script src="../cgi-bin/sinfonix.js?AD-0354464104726F6F7403323535023937%20IN630.js"></script>
<script src="../js/jquery/plugin/popImg.js" defer="defer"></script>
<script src="../js/jquery/plugin/jquery.progress.js" defer="defer"></script>
<link href="../js/jquery/plugin/jquery.modal.css" rel="stylesheet" />
<script src="../js/jquery/plugin/jquery.modal.js" defer="defer"></script>
<!-- metro UI CSS 3.0 -->
<xlink href="../js/demo/metro/docs/css/metro.css" rel="stylesheet">
<xscript src="../js/demo/metro/docs/js/metro.js" defer="defer"></script>
<!-- jQuery UI -->
<link href="../js/jquery-ui/jquery-ui.css" rel="stylesheet" />
<script src="../js/jquery-ui/jquery-ui.min.js" defer="defer"></script>
</body>
</html>
El cual se puede resumir (para los efectos) de la siguiente manera:
<style>
.title {
text-decoration: none;
color:#fff;
font-size:25px;
}
</style>
...
...
...
<td nowrap align="right"><a class="title" href="javascript:CallSQL('^CIA.sql','list','','LoadCompany','key%20codigo%20nombre');">Compañia de Prueba, S.A. </a></td>
</tr>
...
...
...
<td>
<div id="tabs-content" class="tabs-resizer" style="padding:5px; width:989px; height:419px">
<div id="tabs">
<ul>
<li><a href="#Precios">Listas de Precios y Unidades de Medidas</a></li>
<li><a href="#Proveedores">Modelos de los Proveedores</a></li>
<li><a href="#Adicionales">Datos Adicionales</a></li>
</ul>
<div id="Precios" style="padding:0px" align="center">
<table class="Body" width="100%" height="100%">
<tr>
<td valign="top"><span class="title">Listas de Precios</span><div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="LN" nowrap>Descripción</th>
<th class="LN" nowrap colspan="2">PRECIO 1</th>
<th class="LN" nowrap colspan="2">PRECIO 2</th>
...
...
...
Como verán tengo la clase class="title"
la cual se caracteriza por dar un color blanco a la fuente, esta clase la utilizo en 2 partes diferentes del documento pero he aquí el problema: el fondo donde utilizo la primera clase es negro y el fondo donde utilizo la segunda clase es blanco, obviamente el contenido de la fuente no se nota con fondo blanco.
Ahora mi pregunta es la siguiente:
puedo yo hacer con CSS (sin modificar el código HTML pero si basándonos en su contenido), hacer que el color de la clase cambie?.
NOTA:
Puedo yo conjugar las clase "title" que esta dentro de otra clase para que se comporte diferente. (notese que en la segunda clase esta dentro de la clase "tabs-resizer").
Es decir, tengo esto:
<style>
.title {
text-decoration: none;
color:#fff;
font-size:25px;
}
</style>
y quiero esto:
<style>
.title {
text-decoration: none;
color:#fff;
font-size:25px;
.tab-resizer.title {
text-decoration: none;
color:#000;
font-size:25px;
}
</style>
Es esto posible?
table tr td .title
span .title
no creo que este sea el selector correcto, pero es lo que puedes hacer