Aplicar estilos CSS a los elementos secundarios
-
08-07-2019 - |
Pregunta
Quiero aplicar estilos sólo para la tabla dentro del DIV con una clase en particular:
Nota:Prefiero usar un css-selector para niños elementos.
¿Por qué el #1 obras y #2 no?
1:
div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}
2:
div.test th, td, caption {padding:40px 100px 40px 50px;}
HTML:
<html>
<head>
<style>
div.test > th, td, caption {padding:40px 100px 40px 50px;}
</style>
</head>
<body>
<div>
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
<div class="test">
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
</body>
</html>
¿Qué estoy haciendo mal?
Solución
Este código "div.test th, td, caption {padding:40px 100px 40px 50px;}
"se aplica una regla para todos th
elementos que están contenidos por una div
elemento con una clase denominada test
, además de todos td
elementos y todos caption
elementos.
No es lo mismo que "todos los td
, th
y caption
elementos que están contenidos por una div
elemento con una clase de test
".Para lograr que usted necesita para cambiar de selectores:
'>
'no es totalmente compatible con algunos navegadores antiguos (te estoy mirando a ti, Internet Explorer).
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
Otros consejos
.test * {padding: 40px 100px 40px 50px;}
El >
selector solo coincide con los hijos directos, no descendientes.
Quieres
div.test th, td, caption {}
o más probable
div.test th, div.test td, div.test caption {}
Editar:
El primero dice
div.test th, /* any <th> underneath a <div class="test"> */
td, /* or any <td> anywhere at all */
caption /* or any <caption> */
Mientras que el segundo dice
div.test th, /* any <th> underneath a <div class="test"> */
div.test td, /* or any <td> underneath a <div class="test"> */
div.test caption /* or any <caption> underneath a <div class="test"> */
En su original, el div.test > th
dice any <th> which is a **direct** child of <div class="test">
, lo que significa que coincidirá con <div class="test"><th>this</th></div>
pero no coincidirá con <div class="test"><table><th>this</th></table></div>
Si desea agregar estilo en todos los elementos secundarios y sin especificación para la etiqueta html, úselo.
Etiqueta principal div.parent
etiqueta secundaria dentro del div.parent como <a>
, <input>
, <label>
etc.
código: div.parent * {color: #045123!important;}
También puede eliminar importantes, no es obligatorio
Aquí hay un código que escribí recientemente. Creo que proporciona una explicación básica de combinar nombres de clase / ID con pseudoclases.
.content {
width: 800px;
border: 1px solid black;
border-radius: 10px;
box-shadow: 0 0 5px 2px grey;
margin: 30px auto 20px auto;
/*height:200px;*/
}
p.red {
color: red;
}
p.blue {
color: blue;
}
p#orange {
color: orange;
}
p#green {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Class practice</title>
<link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>
<body>
<div class="content">
<p id="orange">orange</p>
<p id="green">green</p>
<p class="red">red</p>
<p class="blue">blue</p>
</div>
</body>
</html>
div.test td, div.test caption, div.test th
funciona para mí.
El selector secundario > no funciona en IE6.
Hasta donde yo sé esto:
div[class=yourclass] table { your style here; }
o en su caso incluso esto:
div.yourclass table { your style here; }
(pero esto funcionará para elementos con yourclass
que podrían no ser div
s) afectará solo las tablas dentro de div[class=yourclass]
. Y, como dice Ken, el & Gt; no es compatible en todas partes (y <=> también, así que use la notación de punto para las clases).