Cosa significano due punti in una dichiarazione CSS?

Question

Questo è un po 'di codice da Twitter Bootstrap

.navbar .nav.pull-right .dropdown-menu, 
.navbar .nav .dropdown-menu.pull-right { 
    left: auto; 
    right: 0; 
} 

Quindi, da quello che cosa .nav.pull-right significa? (notare che ci sono due punti)

Ho cercato here perché ho pensato che fosse una specie di selettore ma non riuscivo a trovarlo.

Answer 1

I due punti indicano due classi.

I.E. Si sta selezionando tutti gli elementi con una classe di NAV e tirare a destra è HTML obiettivo sarebbe simile a questa

<div class="nav pull-right"></div> 

non significa necessariamente che è alla ricerca di un div sia. Potrebbe essere un qualsiasi elemento.

Secondo il vostro selettore in pieno, sarebbe abbinare qualcosa come questi .navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right

<element class='navbar'> 
    <element class='nav pull-right'> 
     <element class='dropdown-menu'>It would match this!</element> 
    </element> 
</element> 

così come

<element class='navbar'> 
    <element class='nav'> 
     <element class='dropdown-menu pull-right'>It would also match this!</element> 
    </element> 
</element> 

Answer 2

Ciò significa un elemento con entrambe le classi nav e pull-right.

Answer 3

.nav.pull-right: gli elementi delle partite che hanno la classe di "nav" e la classe "pull-destra".

Answer 4

Il selettore cerca qualsiasi elemento con la classe nav che ha anche una classe di pull-right:

<div class="nav pull-right"></div> 

Come nota laterale, l'ordine non importa sia nel selettore e l'attributo class.

Answer 5

Questa è la mia risposta a una domanda duplicata. Ci ho messo così tanto impegno che volevo condividerlo con il post "originale".

Seleziona solo elementi con le classi "sposta" e "su". http://www.w3schools.com/cssref/css_selectors.asp

div{ 
 
    width: 60px; 
 
    height: 60px; 
 
    background: beige; 
 
    border: solid black; 
 
    float:left; 
 
    margin: 10px; 
 
    text-align: center; 
 
    line-height: 60px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
} 
 
.separator{ 
 
    width: 5px; 
 
    height: 60px; 
 
    border: solid black; 
 
    background: grey; 
 
    clear: both; 
 
} 
 

 

 

 
.move.up{ 
 
    background: green; 
 
} 
 

 

 
//Additional knowledge 
 
.class1 .class2{ 
 
    background: orange; 
 
} 
 
span div{ 
 
    background: purple; 
 
} 
 

 
.class3, .class4{ 
 
    background: brown; 
 
}

<div class="separator"></div> 
 
<div class="move"> 
 
    1 
 
    </div> 
 
<div class="up"> 
 
    2 
 
</div> 
 
<div class="move up"> 
 
    3 
 
</div> 
 
<div class="move classyclass up"> 
 
    4 
 
</div> 
 
<div class="separator"></div> 
 

 
<!-- Additional knowledge :) --> 
 
<div class="class1"> 
 
    5 
 
    </div> 
 
<div class="class2"> 
 
    6 
 
    </div> 
 
<div class="class1 class2"> 
 
    7 
 
    </div> 
 
<div class="class1 classyclass class2"> 
 
    8 
 
    </div> 
 
<span> 
 
    <div>8.1</div> 
 
</span> 
 
<div class="separator"></div> 
 
<div class="class3"> 
 
    9 
 
    </div> 
 
<div class="class4"> 
 
    10 
 
    </div> 
 
<div class="class3 class4"> 
 
    11 
 
    </div> 
 
<div class="class3 classyclass class4"> 
 
    12 
 
    </div>

Answer 6

2 punti sono in realtà abbinando per 2 classi (selettore) contemporaneamente

Dopo aver letto la risposta pool, sono ancora poco chiare e fare una ricerca e venire con una comprensione ponderata dopo aver letto .container div { } and div.container { }, che ha discusso la differenza di punto (questo caso) & spazio tra i selettori (corrispondente per il figlio del 1 ° selettore).

Richiamo dello stato di pollice su selettore CSS:

1. spazio (nel selettore) significa selettore destro è figlio del selettore di sinistra
2. dot donare un selettore di classe
3. Altrimenti , selettore di tages. < DIV> o < H3> o < td>

in cui regola 2 & 3 sono in qualche modo intercambiabili

---

scenario originale:

.nav.pull-right 

Transform 1a classe dot selettore per taggare selettore (regola di interscambio 2 con regola 3) bec ome tag + scenario dot

ul.pull-right 

Infine, il risultato sono banale, corrispondono tutte tag ul con classe di pull-destra definito

P.S. Non confonderò mai più, spero che ogni lettore non lo confonderà di nuovo