css - icon - special html characters
Qué significa symbol tilde(~) en CSS (2)
Esta pregunta ya tiene una respuesta aquí:
Quiero saber qué significa (~) en css.
#img1:hover ~ #img2 {
opacity: 0;
}
En el estudio visual, obtengo un error de "secuencia de caracteres inesperada" cuando uso este símbolo. cuál es el significado real de esto en CSS. ¿Qué hace?
Aplica el estilo a todos los elementos que coinciden con el segundo selector si aparecen después de los elementos que coinciden con el primer selector. Por ejemplo, dado un fragmento de HTML:
<p>Line one</p>
<hr />
<p>Line two</p>
<p>Line three</p>
y una regla de CSS:
hr ~ p {
font-weight: bold;
}
solo <p>Line two</p> y <p>Line three</p> aparecerán en negrita. En su ejemplo, creo que Visual Studio tiene problemas para interpretar el modificador :hover , ya que no es realmente un elemento. Si lo elimina de la regla, puede funcionar correctamente.
http://www.w3.org/TR/selectors/
8.3.2. Combinador general de hermanos
El combinador de hermanos general está hecho del carácter "tilde" (U + 007E, ~) que separa dos secuencias de selectores simples. Los elementos representados por las dos secuencias comparten el mismo elemento primario en el árbol del documento y el elemento representado por la primera secuencia precede (no necesariamente de inmediato) al elemento representado por el segundo.
ejemplo
h1 ~ pre
coincide con <pre> aquí:
<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>
También hay + selector, para el combinador de hermanos adyacente: con h1 + pre la etiqueta <pre> debería estar justo después de <h1>