tipos - Aplicar estilo CSS a elementos secundarios




tipos de hojas de estilo (5)

Quiero aplicar estilos solo a la tabla dentro del DIV con una clase particular:

Nota: Prefiero usar un selector css para elementos secundarios.

¿Por qué el # 1 funciona y el # 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?


Aquí hay un código que escribí recientemente. Creo que proporciona una explicación básica para 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>


El selector > coincide solo con niños directos, no descendientes.

Usted quiere

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 tu original, 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á <div class="test"><table><th>this</th></table></div>


Por lo que yo sé esto:

div[class=yourclass] table {  your style here; } 

o en tu caso incluso esto:

div.yourclass table { your style here; }

(pero esto funcionará para elementos con su yourclass que podrían no ser yourclass ) afectará solo las tablas dentro de su yourclass . Y, como dice Ken, el> no es compatible en todas partes (y div[class=yourclass] también, así que use la notación de puntos para las clases).


Si desea agregar estilo en todos los elementos secundarios y no hay especificaciones para la etiqueta html, úselo.

Etiqueta padre div.parent

etiqueta secundaria dentro de div.parent como <a> , <input> , <label> etc.

código: div.parent * {color: #045123!important;}

También puede eliminar importante, no es necesario


div.test td, div.test caption, div.test th 

funciona para mi.

El selector de elementos secundarios> no funciona en IE6.





css-selectors