has - CSS Niño vs selectores descendientes

css selector selenium

Question

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?

Answer 1

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.

Answer 2

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

Example

.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>

Answer 3

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 .

Answer 4

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.

Answer 5

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)

Answer 6

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; }

http://jsfiddle.net/X343c/1/

Answer 7

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''