Co oznaczają dwie kropki w deklaracji CSS?

Question

Jest to fragment kodu z Twitter Bootstrap

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

Tak od .nav.pull-right że co to oznacza? (zauważ, że są tam dwie kropki)

Szukałem here, ponieważ zakładałem, że był to jakiś selektor, ale nie mogłem go znaleźć.

Answer 1

Dwie kropki oznaczają dwie klasy.

I.E. Jest wybierając wszystkie elementy z klasą NAV i pull-prawy to cel HTML wyglądałby następująco

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

to niekoniecznie oznacza, że ​​szuka div albo. To może być dowolny element.

Według twojej selektora w całości, to dopasować coś jak te .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> 

jak również

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

Answer 2

Oznacza to element o obu klasach nav i pull-right.

Answer 3

.nav.pull-right oznaczają pierwiastki meczu, które mają klasę „nav” i klasy "pull-right".

Answer 4

Selektor wygląda dla każdego elementu z klasą nav który ma również klasę pull-right:

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

Na marginesie, kolejność nie ma znaczenia zarówno w selektora i w atrybucie class.

Answer 5

To jest moja odpowiedź na zduplikowane pytanie. Włożyłem w to tyle wysiłku, że chciałem podzielić się nim z "oryginalnym" postem.

Po prostu wybiera elementy z klasami "przenieś" i "w górę". 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 kropki są właściwie dopasowane do 2 klasy (wybór) jednocześnie

Po przeczytaniu zbiorczej odpowiedzi, jestem nadal nie bardzo jasne i zrobić badania i wymyślić zrozumienie po przeczytaniu .container div { } and div.container { }, która omówiła różnicę dot (ten przypadek) & space między selektorami (pasujące do elementu podrzędnego pierwszego selektora).

Przypomnijmy reguła kciuki około selektora CSS:

1. przestrzeni (w selektor) oznacza prawo wybieraka jest dziecko z lewej selektor
2. kropka podarować selektor klasy
3. W przeciwnym razie , selektor znacznikównp. < DIV> lub < H3> lub < td>

w którym artykułem 2 & 3 są jakoś interchangable

---

oryginalny scenariusz:

.nav.pull-right 

Transform 1st Class kropka selektor do selekcji znaczników (reguła wymiany 2 z regułą 3) bec ome tag + kropka scenariusz

ul.pull-right 

Wreszcie wynikiem są trywialne, to wszystko pasuje ul tag z rozkładaną prawo klasy zdefiniowanej

PS: Nigdy więcej się nie pomylę, mam nadzieję, że każdy czytelnik nie pomyli tego jeszcze raz.