Esto es un poco de código de Twitter Bootstrap¿Qué significan dos puntos en una declaración de CSS?
.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
}
Así que desde ese ¿qué significa .nav.pull-right? (tenga en cuenta que hay dos puntos)
He buscado here porque supuse que era un tipo de selector pero no pude encontrarlo.
Los dos puntos indican dos clases.
I.E. Que es la selección de todos los elementos con una clase de NAV y tire derecha es HTML objetivo se vería así
<div class="nav pull-right"></div>
no significa necesariamente que se está buscando un div tampoco. Podría ser cualquier elemento.
De acuerdo con el selector en su totalidad, coincidiría con algo como esto .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>
, así como
<element class='navbar'>
<element class='nav'>
<element class='dropdown-menu pull-right'>It would also match this!</element>
</element>
</element>
Eso significa un elemento con ambas clases nav y pull-right.
.nav.pull-right significa que los elementos de los partidos que tienen la clase "nav" y la clase "pull-right".
El selector busca cualquier elemento con la clase nav que también tiene una clase de pull-right:
<div class="nav pull-right"></div>
Como nota al margen, el orden no tiene importancia tanto en el selector y en el atributo class.
Esta es mi respuesta en una pregunta duplicada. He puesto tanto esfuerzo en ello que quería compartirlo con la publicación "original".
Simplemente selecciona elementos con las clases "mover" y "arriba". 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>2 puntos son en realidad coinciden para 2 clases (selector) simultáneamente
Después de leer la respuesta combinada, todavía no estoy muy claro y hacer una investigación y llegar a una comprensión reflexiva después de leer .container div { } and div.container { }, que discutió la diferencia de punto (este caso) & espacio entre los selectores (coincidencia para el niño del primer selector).
Recordemos la regla del pulgar sobre el selector CSS:
en el que la regla 2 & 3 son de alguna manera intercambiable
escenario original:
.nav.pull-right
Transform primera clase de puntos selector al selector de etiquetas (regla de intercambio 2 con la regla 3) bec ome etiqueta + escenario de puntos
ul.pull-right
Por último, el resultado son triviales, que se ajustan a todos los etiqueta ul con la clase de extracción de los derechos definidos
P. S. Nunca volveré a confundir, espero que cada lector no lo vuelva a confundir
He estado usando css durante 13 años y de alguna manera olvidé por completo esto, increíble: -O – byronyasgur