Confundido conceptos css

[neodani]

Tengo un problema de conceptos de css, al parecer no sé aun como funciona esto.

Intento aplicarle estilo a una tabla y claro... si no pongo ninguna etiqueta id ni class me lo aplica a todas las tablas.

Entonces... esto lo solucionaba creando una capa que envuelve toda la tabla y poniendo la etiqueta "id" delante...

Pero no logro hacerlo...

Esta es la que tengo por defecto:

Código:

table,td
{
	border               : 1px solid #CCC;
	border-collapse      : collapse;
  font                 : small/1.4 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}
table
{
	border                :none;
	border                :1px solid #CCC;
}
thead th,
tbody th
{
/*background            : #FFF url(../imagenes/tablas/th_bck.gif) repeat-x;*/
background            : #fafafb;
  color                 : #666;  
	padding               : 5px 10px;
  border-left           : 1px solid #CCC;
  font-weight:bold;
  text-align:center;
  font-size:11px;
  vertical-align: middle;
}
tbody th
{
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : left;
  font-weight           : normal;
  
}
tbody tr td
{
	padding               : 5px 10px;
  color                 : #666;
  cursor:pointer;
  font-size:11px;
  text-align:center;
}
tbody tr:hover
{
  /*background            : #FFF url(../imagenes/tablas/tr_bck2.gif) repeat;*/
  background:#F0F7FC;
  
}

tbody tr:hover td
{
  color                 : #454545;
  /*border            : 1px solid #454545;*/
}
tfoot td,
tfoot th
{
  border-left           : none;
  border-top            : 1px solid #CCC;
	padding               : 4px;
  background            : #FFF url(../imagenes/tablas/foot_bck.gif) repeat;
  color                 : #666;
}
caption
{
	text-align            : left;
	font-size             : 100%;
	padding               : 30px 0 10px 0px;
	color                 : #666;
	font-weight: bold;
	width:500px;
}
table a:link
{
	color                 : #666;
}
table a:visited
{
	color                 : #666;
}
table a:hover
{
	color                 : #003366;
	text-decoration       : none;
}
table a:active
{
	color                 : #003366;
}

Entonces quiero que solo se aplique cuando este dentro de una capa contenedora que se llame por ejemplo "mitabla".

Lo he intentado así... pero no funciona

Código:

#mitable table,td
{
	border               : 1px solid #CCC;
	border-collapse      : collapse;
  font                 : small/1.4 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}
#mitable table
{
	border                :none;
	border                :1px solid #CCC;
}
#mitable thead th,
#mitable tbody th
{
/*background            : #FFF url(../imagenes/tablas/th_bck.gif) repeat-x;*/
background            : #fafafb;
  color                 : #666;  
	padding               : 5px 10px;
  border-left           : 1px solid #CCC;
  font-weight:bold;
  text-align:center;
  font-size:11px;
  vertical-align: middle;
}
#mitable tbody th
{
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : left;
  font-weight           : normal;
  
}
#mitable tbody tr td
{
	padding               : 5px 10px;
  color                 : #666;
  cursor:pointer;
  font-size:11px;
  text-align:center;
}
#mitable tbody tr:hover
{
  /*background            : #FFF url(../imagenes/tablas/tr_bck2.gif) repeat;*/
  background:#F0F7FC;
  
}

#mitable tbody tr:hover td
{
  color                 : #454545;
  /*border            : 1px solid #454545;*/
}
#mitable tfoot td,
#mitable tfoot th
{
  border-left           : none;
  border-top            : 1px solid #CCC;
	padding               : 4px;
  background            : #FFF url(../imagenes/tablas/foot_bck.gif) repeat;
  color                 : #666;
}
#mitable caption
{
	text-align            : left;
	font-size             : 100%;
	padding               : 30px 0 10px 0px;
	color                 : #666;
	font-weight: bold;
	width:500px;
}
#mitable table a:link
{
	color                 : #666;
}
#mitable table a:visited
{
	color                 : #666;
}
#mitable table a:hover
{
	color                 : #003366;
	text-decoration       : none;
}
#mitable table a:active
{
	color                 : #003366;
}

Es correcto?

Gracias

[Mikmoro]

Debería ser correcto, aunque no muestras el html al que se lo has aplicado para ver si está bien o no.

No obstante, es más sencillo ponerle un id o una clase a la propia tabla. De esa manera podrías poner:

<table id="tablauno"><tr...

y en la css

#tablauno {...
#tablauno td {...

etcétera.


Por otro lado, estás usando algunas cosas un tanto contradictorias:

table
{
border :none;
border :1px solid #CCC;
}

¿none o 1px? quieres que tenga borde, o no?

Mikel.