has - CSS Niño vs selectores descendientes
css selector selenium (7)
Estoy un poco confundido entre estos 2 selectores.
¿El selector de descendencia :
div p
¿Seleccionar todo p dentro de un div sea o no un descendiente inmediato? Entonces, si la p está dentro de otra div , ¿todavía será seleccionada?
Luego el selector de niños :
div > p
¿Cual es la diferencia? ¿Un niño significa niño inmediato ? P.ej.
<div><p>
vs
<div><div><p>
¿Ambos serán seleccionados, o no?
Bascailly, " ab " selecciona todas las b dentro de a, mientras que " a> b " selecciona las b que son solo hijos de a, no seleccionará b lo que es b de lo que es hijo de a .
Este ejemplo ilustra la diferencia:
div span{background:red}
div>span{background:green}
<div><span>abc</span><span>def<span>ghi</span></span></div>
El color de fondo de abc y def será verde, pero ghi tendrá color de fondo rojo.
IMPORTANTE: Si cambias el orden de las reglas a:
div>span{background:green}
div span{background:red}
Todas las letras tendrán un fondo rojo, porque el selector de descendientes también seleccionará al niño.
La selección de CSS y el estilo de aplicación a un elemento en particular se pueden hacer atravesando a través del elemento dom [Ejemplo
.a .b .c .d{
background: #bdbdbd;
}
div>div>div>div:last-child{
background: red;
}
<div class=''a''>The first paragraph.
<div class=''b''>The second paragraph.
<div class=''c''>The third paragraph.
<div class=''d''>The fourth paragraph.</div>
<div class=''e''>The fourth paragraph.</div>
</div>
</div>
</div>
Sí, estás en lo correcto. div p coincidirá con el siguiente ejemplo, pero div > p no coincidirá.
<div><table><tr><td><p> <!...
El primero se llama selector descendiente y el segundo se llama selector hijo .
Solo piense en lo que significan las palabras "niño" y "descendiente" en inglés:
- Mi hija es mi hijo y mi descendiente.
- Mi nieta no es mi hija, pero ella es mi descendiente.
Tenga en cuenta que el selector secundario no es compatible con Internet Explorer 6. (Si usa el selector en un selector de jQuery / Prototype / YUI, etc. en lugar de en una hoja de estilo, todavía funciona)
En teoría: Niño => un descendiente inmediato de un antepasado (por ejemplo, Joe y su padre)
Descendiente => cualquier elemento que desciende de un antepasado en particular (por ejemplo, Joe y su tatarabuelo)
En la práctica: prueba este HTML:
<div class="one">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<div class="two">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
con este CSS:
span { color: red; }
div.one span { color: blue; }
div.two > span { color: green; }
div p
Selecciona todos los elementos ''p'' donde el padre es un elemento ''div''
div > p
Significa hijos inmediatos Selecciona todos los elementos ''p'' donde el padre es un elemento ''div''