CSS pseudo-clases
selectores CSS pseudo-clases se utilizan para agregar algunos efectos especiales.
gramática
sintaxis pseudo-clase:
clases CSS también pueden utilizar pseudo-clase:
seudo clases de anclaje
soporte de CSS en los navegadores, diferentes estado del enlace se puede mostrar en diferentes formas
Ejemplos
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
Trate »
Nota: definición CSS, a: hover debe ser colocado en una: un enlace y: después de visitar, es eficaz.
Nota: definición CSS, un activo debe ser colocado en un: hover después, para ser eficaz.
Nota: El nombre de lapseudo-clase no es sensible a mayúsculas.
Las pseudo-clases y clases CSS
Las pseudo-clases se pueden utilizar en combinación con clases CSS:
<a class="red" href="css-syntax.html"> CSS Sintaxis </a>
Si el enlace anterior ejemplo se ha visitado, éste se mostrará en rojo.
CSS -: en primer lugar - los niños pseudo-clase
Se puede utilizar el: first-child pseudo-clase selecciona el primer elemento hijo
Nota: Usted debe ser declarado en la versión anterior de Internet Explorer 8 <! DOCTYPE> , así: primer niño tomar efecto.
Coincidir con el primer elemento <p>
En el siguiente ejemplo, el selector coincide con el elemento <p> como el primer hijo de cualquier elemento elementos:
Ejemplos
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Trate »
Coincidir con todos los elementos <p> en el primer elemento <i>
El primer <i> en el ejemplo siguiente, el selector coincide con cualquier <p> elemento:
Ejemplos
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Trate »
<H2 ajuste de todos como el primer elemento hijo del elemento <p> en todos los <i> elementos:
Ejemplos
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Trate »
CSS -: lang pseudo-clase
: Lang pseudo-clase le permite tener la capacidad para diferentes idiomas definen reglas especiales
Nota: IE8, deberá incluir la <! DOCTYPE> Apoyar; lang pseudo-clase.
En el siguiente ejemplo ,: valor del atributo lang tipo de clase de q no hay definiciones de elementos citas:
Ejemplos
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Trate »
más ejemplos
Añadir a diferentes estilos de hipervínculos
Este ejemplo muestra cómo agregar otros estilos de hipervínculos.
Uso: enfoque
Este ejemplo muestra cómo utilizar el: centrarse pseudo-clase.
Todo CSS pseudo-clases / elementos
selector | ejemplo | El ejemplo muestra |
---|---|---|
: activada | input:checked | Todo elemento de formulario seleccionado |
: desactivado | input:disabled | Seleccionar todos los elementos de formulario con discapacidad |
: vacío | p:empty | Seleccionar todos los elementos p no tienen hijos |
: habilitado | input:enabled | Seleccionar todos los elementos de formulario habilitadas |
: La primera de tipo | p:first-of-type | Seleccione cada elemento padre es los primeros elementos p p elemento hijo |
: En rango | input:in-range | Seleccionar los valores de los elementos dentro de un rango especificado |
: inválido | input:invalid | Seleccionar todos los elementos no válidos |
: Last-child | p:last-child | Seleccionar todos los elementos p en el último elemento secundario |
: El último de los de tipo | p:last-of-type | Seleccione cada elemento p es el último elemento de un elemento padre p |
: No (selector) | :not(p) | Seleccionar todos los elementos que no sean el p |
: Nth-child (n) | p:nth-child(2) | Seleccionar todos los elementos p en el segundo sub-elemento |
: Nth-last-child (n ) | p:nth-last-child(2) | Seleccionar todos los elementos de la inversa de p segundo elemento hijo |
: Nth-última-de-tipo (n) | p:nth-last-of-type(2) | Seleccionar todos los elementos p es la inversa de la segunda sub-elemento p |
: Nth-de-tipo (n ) | p:nth-of-type(2) | Seleccionar todos los elementos p en el segundo sub-elemento para el p |
: Only-de-tipo | p:only-of-type | Seleccione sólo un elemento hijo de p elementos |
: Un solo hijo | p:only-child | Seleccione sólo un elemento hijo de p elementos |
: opcional | input:optional | Optar por no atributo "necesaria" del elemento |
: Fuera de rango | input:out-of-range | Seleccionar elemento de atributo fuera del rango especificado de valores |
: Sólo lectura | input:read-only | Seleccione el atributo de sólo lectura de los atributos de los elementos |
: Lectura y escritura | input:read-write | Elegir no sólo lectura atributo de las propiedades de los elementos |
: requerida | input:required | Seleccione la opción "requerida" atributo especifica las propiedades de los elementos |
: root | root | Seleccione el elemento raíz del documento |
: diana | #news:target | Seleccionar elemento de la actividad actual #news (haga clic en una dirección URL que contiene el nombre del anclaje) |
: válido | input:valid | Seleccione todos los valores válidos para las propiedades |
: enlace | a:link | Seleccionar todos los enlaces no visitados |
: visited | a:visited | Seleccionar todos los enlaces visitados |
: activa | a:active | Select es un enlace activo |
: hover | a:hover | Ponga el ratón sobre el estado del enlace |
: enfoque | input:focus | Después de seleccionar el elemento de entrada tiene enfoque |
: First-letter | p:first-letter | Seleccione la primera letra de cada elemento <p> |
: First-line | p:first-line | Seleccione la primera línea de cada elemento <p> |
: First-child | p:first-child | <] P> selector de elementos coincide con cualquier elemento que pertenece al primer elemento secundario |
: antes | p:before | Insertar contenido antes de cada elemento <p> |
: después de | p:after | Insertar contenido después de cada elemento <P> |
: Lang (idioma) | p:lang(it) | selección de atributos lang <p> elemento a un valor de inicio |