father - ¿Qué significa> en CSS?

css3 select parent based on child

Question

En el archivo css IUI, usan los siguientes selectores:

body > *:not(.toolbar)
body > *[selected="true"] 

¿Qué significa el>, *: no () y * []?

Gracias.

Answer 1

significa elemento hijo

.cont > div {
    color: #fff;
}

Esto sería:

<div class="cont">
    <!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS 
         It only affects the below div. Not the p.
         so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
    <div>jabberwocky</div>
    <p>lorem ipsum</p>
</div>

Answer 2

> significa " es un elemento hijo de ". Entonces body > *:not(.toolbar) coincide con *:not(.toolbar) que es un hijo del body .

*:not(.toolbar) coincide con cualquier elemento que no tenga la clase .toolbar .

*[selected="true"] coincide con cualquier elemento con el atributo selected igual a true .

Tenga en cuenta que los dos últimos ( *:not() y *[] son parte de la especificación de CSS3 y, por lo general, no puede confiar en ellos para la compatibilidad de CSS en varios navegadores. Sin embargo, son totalmente compatibles con WebKit, que es lo que usa el iPhone (y, por consiguiente, iUI).

Answer 3

• > significa un niño directo
• * es un selector universal (todo)
• :not() significa nada excepto lo que está entre paréntesis
• *[] significa cualquier cosa que coincida con lo que hay entre paréntesis

En tu caso:

body > *:not(.toolbar)   // means any element immediately under the body tag that isn''t of class .toolbar
body > *[selected="true"]    // means any element immediately under the body tag where the selected attribute is "true"

> y * están definidos en la especificación CSS 2.1. La :not pseudo clase y el selector [] se definen en la especificación CSS 3.

Consulte: http://www.w3.org/TR/CSS21/selector.html y http://www.w3.org/TR/css3-selectors / para obtener más información.

Answer 4

• > - Selector infantil

  Es decir

  div > p > b {
   font-size:100px;
  }

  Esto seleccionará todas las etiquetas b dentro de las etiquetas p dentro de las etiquetas div .

• :not(..) - no selector

  Coincide con cualquier elemento de la página que no cumpla con los criterios entre paréntesis de la instrucción no. es decir

  div:not(.toolbar)

  Coincidirá con cualquier div que no tenga la barra de herramientas de clase

• [attr=''val''] - selector de atributo

  Esto coincide con cualquier elemento donde el atributo coincide con el valor especificado. Ejemplo si desea que todas las casillas de verificación marcadas en rojo.

  input[checkec=''true''] {
    background-color:red;
  }

Usted debe Google selectores de CSS 2.1 para más información.