Cosa fa > in CSS significa?

Question

Nel file css IUI, usano i seguenti selettori:

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

Cosa significano > ;, *: not () e * []?

Grazie.

Answer 1

> significa " è un elemento figlio di " ;. Quindi body > *: not (.toolbar) corrisponde a *: not (.toolbar) che è figlio di body .

*: not (.toolbar) corrisponde a qualsiasi elemento che non ha la classe .toolbar .

* [selected = " true "] corrisponde a qualsiasi elemento con l'attributo selezionato uguale a true .

Tieni presente che gli ultimi due ( *: not () e * [] fanno parte di specifica CSS3 e di solito non puoi fare affidamento su di essi per la compatibilità CSS cross-browser. Tuttavia, sono completamente supportati in WebKit che è ciò che l'iPhone (e di conseguenza la IUI).

Answer 2

• > indica un figlio diretto
• * è un selettore universale (tutto)
• : not () indica qualsiasi cosa tranne quelle tra parentesi
• * [] indica tutto ciò che corrisponde a ciò che è tra parentesi

Nel tuo 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"

> e * sono definiti nella specifica CSS 2.1. La pseudo classe : not e il selettore [] sono definiti nella specifica CSS 3.

Vedi: http://www.w3.org/TR/CSS21/selector. html e http://www.w3.org/TR/css3-selectors / per maggiori informazioni.

Answer 3

  

significa elemento figlio

.cont > div {
    color: #fff;
}

Questo sarebbe:

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

• > - Selettore figlio

  vale a dire.

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

  Questo selezionerà tutti i tag b all'interno di p all'interno dei tag div .

• : not (..) - non selettore

  Corrisponde a qualsiasi elemento della pagina che non soddisfa i criteri tra parentesi dell'istruzione not. cioè.

  div:not(.toolbar)
  

  Corrisponderà a qualsiasi div che non ha la barra degli strumenti della classe

• [attr = 'val'] - selettore di attributi

  Corrisponde a qualsiasi elemento in cui l'attributo corrisponde al valore specificato. Esempio se si desidera rendere rosse tutte le caselle di controllo selezionate.

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

Dovresti selezionare i selettori Google CSS 2.1 per ulteriori informazioni.