llamar - Varias clases en CSS Selector
selector adyacente css (5)
Para hacer coincidir un subconjunto de valores de "clase", cada valor debe ir precedido de un ".", En cualquier orden.
Ejemplo (s):
Por ejemplo, la siguiente regla coincide con cualquier elemento P cuyo atributo "clase" se haya asignado a una lista de valores separados por espacios que incluye "pastoral" y "marino":
p.pastoral.marine {color: green}
Esta regla coincide con class = "pastoral blue aqua marine" pero no coincide con class = "pastoral blue".
http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html
Veo un selector como este,
.class1 .class2 .class3 {
}
¿Qué significa esto?
He usado selectores de múltiples clases sin espacios. Espacio significa descendiente pero no tiene sentido para las clases.
Digamos que hay una página con el siguiente marcado,
<div class="class1">
<div class="class2">
<div class="class3">
Some page element(s).
</div>
</div>
</div>
El CSS que proporcionó calificaría todos los elementos en class3, que están en class2, que están en class1.
es decir, este fue el estilo,
.class1 .class2 .class3{
color:red;
}
Convertiría el texto en rojo, que es el equivalente de lo siguiente,
div.class1 div.class2 div.class3 {
color:red;
}
Finalmente, lo siguiente no haría nada,
.class1.class2.class3{
color:red;
}
Editar: Si el marcado fue el siguiente,
<div class="class1 class2 class3">
Some page element(s).
</div>
Funcionaría y renderizaría el texto en rojo.
Nota: <IE7 podría tener problemas con lo anterior ...
http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/ http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html
Las otras respuestas le proporcionan la explicación que necesita; Incorporaré un caso de uso práctico solo para alimentar la curiosidad de alguien.
Un caso común de uso en el mundo real para selectores de clases múltiples separados por combinators descendientes es cuando un sitio tiene una clase de cuerpo diferente para ciertas páginas o ciertos dispositivos.
Por ejemplo, considere este marcado de un sitio web simple. Además del encabezado y pie de página, también tiene una columna de contenido y dos barras laterales:
<!-- DTD, html, head... -->
<body>
<div id="wrap">
<div id="header">
<h1>My Site</h1>
</div>
<div id="content">
<!-- ... -->
</div>
<div id="side1" class="sidebar"><!-- ... --></div>
<div id="side2" class="sidebar"><!-- ... --></div>
<div id="footer">
<p>Copyright LOLOLOL</p>
</div>
</div>
</body>
</html>
La configuración predeterminada podría ser organizar #content entre .sidebar s, hecho con algunos trucos flotantes que no .sidebar aquí.
En un dispositivo móvil, además de cambiar el tamaño de todo para la resolución pequeña, tal vez el diseñador quiera eliminar las barras laterales para reclamar algún estado de pantalla horizontal. Además de las consultas de los medios, también existe la opción mucho más simple de usar código del lado del servidor para detectar navegadores móviles y etiquetar el body con una clase en consecuencia, así (Ejemplo de ASP.NET C #):
<% if (((HttpCapabilitiesBase) Request.Browser).IsMobileDevice) { %>
<body class="mobi">
<% } else { %>
<body>
<% } %>
Ahí es donde tu ejemplo es útil. El diseñador solo usa la siguiente regla para ocultar las barras laterales de los dispositivos móviles:
/* This would appear just beneath the .sidebar { ... } rule */
.mobi .sidebar {
display: none;
}
Por supuesto, el mismo código de detección del navegador podría ser utilizado para ocultar el marcado de la barra lateral, afeitar el tamaño de la página y todo ese jazz, pero de nuevo esa es solo otra forma de acercarse a esto. Solo estoy dando un ejemplo práctico rápido de cómo múltiples selectores de clase en una jerarquía se pueden usar en CSS.
Todavía significa descendente y tiene sentido para las clases si tiene jerarquías anidadas. Por ejemplo:
.blackOnWhite .title {
color:black;
}
.whiteOnWhite .title {
color:white;
}
div{
padding: 5px;
border: 1px solid #f00
}
.class1 .class2 .class3 {
background-color: #000;
}
cambiará el fondo de la div más interna:
<div class="class1">
<div class="class2">
<div class="class3">
</div>
</div>
</div>
En otras palabras, significa aplicar estilo para class3 que es un hijo de class2 que es un hijo de class1 .
Si ignora los espacios, su regla de estilo se aplicará a lo siguiente:
.class1.class2.class3{
background-color: #000;
}
<div class="class1 class2 class3">
</div>