O que faz> em CSS média?

Question

No arquivo IIU css, eles usam os seguintes seletores:

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

O que faz a>, *:? Não () e * [] significa

Graças.

Answer 1

meios > " é um elemento filho de ". Então body > *:not(.toolbar) corresponde *:not(.toolbar) que é um filho de body.

*:not(.toolbar) corresponde a qualquer elemento que não tem o .toolbar classe.

*[selected="true"] corresponde a qualquer elemento com o atributo selected igual a true.

Tenha em mente que os dois últimos (*:not() e *[] fazem parte do CSS3 especificações e você geralmente não pode contar com eles para compatibilidade com CSS cross-browser. Eles são, no entanto, totalmente suportado no WebKit que é o que o iPhone (e consequentemente IIU) uso.

Answer 2

• significa > um filho direto
• * é um seletor universal (tudo)
• meios :not() qualquer coisa, exceto o que está no parênteses
• meios *[] nada com o que há de nos suportes

No seu 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 * são definidas na especificação CSS 2.1. A classe :not pseudo e o selector [] são definidos na especificação CSS 3.

Veja: http://www.w3.org/TR/CSS21/selector. html e http://www.w3.org/TR/css3-selectors / para mais informações.

Answer 3

elemento meios criança

.cont > div {
    color: #fff;
}

Este seria:

<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

• > - seletor Criança

  i.

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

  Isso irá selecionar todas as tags b dentro de tags p dentro de tags div.

• :not(..) - não selector

  Corresponde a qualquer elemento na página que não atende aos critérios do parêntese da não declaração. i.

  div:not(.toolbar)
  

  Combina com qualquer div que não tem a classe barra de ferramentas

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

  Esta corresponde a qualquer elemento onde o atributo corresponde ao valor especificado. Exemplo, se você quiser fazer todas as caixas de seleção verificados vermelho.

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

Você deve Google seletores CSS 2.1 para obter mais informações.