Los selectores CSS. tipos de selectores

, cada uno de los cuales desea establecer un color específico. ¿Cómo hacerlo? selectores CSS estándar no son adecuados para las etiquetas, que indican los parámetros para todos los bloques a la vez. La solución es simple. Asignar miembros de la clase. Por ejemplo, el primero recibió div class = 'rojo', el segundo – class = 'azul', tercera – class = 'verde'. Ahora pueden seleccionarse utilizando tablas CSS.

La sintaxis es la siguiente: Indica un punto ( ""), seguido de escribir el nombre de la clase. Para administrar la primera unidad, utilice la construcción .red. En segundo lugar – .Blue y así sucesivamente.

Importante! Se recomienda utilizar valores significativos del atributo de clase. Se considera mala forma de utilizar transliteración (por ejemplo, krasiviy-Blok) o combinaciones aleatorias de letras / números (ojfh834871). En este código, que están obligados a confundirse, por no hablar de las dificultades que se enfrentarán a los que se dedican en el proyecto después. La mejor opción – para utilizar cualquier metodología, como BEM.

Ventajas – relativamente alta flexibilidad.

Desventajas – los elementos múltiples pueden ser una y la misma clase, lo que significa que van a ser editados simultáneamente. El problema se resuelve utilizando la metodología, así como la herencia de pre-procesadores. Asegúrese de obtener sus manos menos, Sass o algún otro preprocesador, que simplifican enormemente el trabajo.

selector de ID

Sobre esta versión codificadores de opinión y programadores son ambiguas. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Algunos tutoriales CSS no recomiendan el uso de identificación, ya que en la aplicación errónea de que puedan causar problemas con la herencia. Sin embargo, muchos expertos están activamente colocarlos a lo largo del trazado. Usted decide. # »), затем имя блока. La sintaxis es la siguiente: el signo de número ( "#"), entonces el nombre del bloque. #red. Por ejemplo, #rojo.

отличается от класса по нескольким параметрам. ID es diferente de la clase de varias maneras. ID. En primer lugar, la página no puede ser de dos idénticos ID. Se les asigna un nombre único. En segundo lugar, un selector de este tipo tiene una prioridad más alta. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Esto significa que si se especifica una clase de rojo y se especifica en las tablas CSS rojo color de fondo, y luego asignarle el mismo id azul y especificar el color azul, la unidad se vuelve azul.

Ventajas – Se puede controlar el elemento específico, haciendo caso omiso de estilos de etiquetas y clases.

ID и class. Desventajas – fácil perderse en un gran número de ID y clase.

Importante! ID вам, в общем-то, не нужны. Si está utilizando la metodología BEM (o sus análogos), ID para que, en general, no son necesarios. Esta técnica consiste en la utilización de los esquemas clases únicas que mucho más conveniente.

selector universal,

{}. Sintaxis: actrices jóvenes signo ( "*") y los apoyos, es decir, {*} …

Se utiliza para asignar ciertos atributos una vez que todos los elementos de la página. Cuando esto puede ser útil? box-sizing: border-box. Por ejemplo, si desea establecer la propiedad de página del cuadro-dimensionamiento: frontera-box. div *{}. No sólo puede ser utilizado para gestionar todos los componentes del documento, sino también para controlar todos los niños del bloque especificado, por ejemplo, div * {}.

Ventajas – se puede controlar un gran número de elementos a la vez.

Contras – no lo suficiente como opción flexible. Además, el uso de este selector, en algunos casos más lento el trabajo de la página.

por atributos

Que sea posible controlar el elemento con un atributo específico. Por ejemplo, usted tiene una serie de etiquetas de entrada con un tipo de atributo diferente. Uno de ellos – el texto, la segunda – la contraseña, la tercera – número. Por supuesto, se puede establecer cada clase o ID, pero no siempre es conveniente. selectores CSS de atributos hacen posible especificar valores para ciertas etiquetas con la máxima precisión. Por ejemplo, así:

de entrada [ 'texto' type =] {}

Este selector se seleccionará todos los atributos con el tipo de texto de entrada.

La herramienta es muy flexible y se puede utilizar con cualquiera de las etiquetas, en las que puede haber atributos. Pero eso no es todo! La especificación CSS tiene la capacidad de controlar los elementos con mayor comodidad!

Imagínese que su página tiene entrada con el marcador de posición atributo = "Introduzca un nombre" y marcador de posición de entrada = "Introduzca la contraseña". También se pueden seleccionar con el mando! Para ello, utilice la siguiente estructura:

entrada [marcador de posición = "Introduzca el nombre"] {} o la entrada [marcador de posición = "Introduzca la contraseña"]

Quizás el trabajo más flexible con los atributos. Digamos que usted tiene una serie de etiquetas con el título atributos similares (por ejemplo, "Caspian" y "Caspian"). Para seleccionar tanto, utilizar las siguientes selecciones:

[Título * = "Kaspiysk"]

CSS elegirá todos los elementos en el título de los cuales hay símbolos de "Caspian", es decir. E., Y "Caspian" y "Caspian".

También puede elegir las etiquetas que comienzan con los atributos de un cierto carácter:

[^ Título = "carácter que desea"] {}

o poner fin a ellas:

[Título de $ = "carácter correcto"] {}.

Ventajas – máxima flexibilidad. Puede seleccionar cualquiera de los elementos de página existentes sin jugar con las clases.

Desventajas – utilizados con relativa poca frecuencia, sólo en casos específicos. Muchos diseñadores web prefieren metodología, ya que la clase punto es más fácil que para organizar numerosos corchetes y signos "igual". Además, estos selectores no funcionan en las versiones de Internet Explorer 7 y siguientes. Sin embargo, quienes están ahora necesita el antiguo Internet Explorer?

seudo selectores

Denota un elemento pseudo-estado. Por ejemplo ,: vuelo estacionario – lo que ocurre con la parte de la página cuando se pasa ,: visitados – enlace visitado. También incluye elementos tales como: first-child y: el último niño.

Este tipo de selector se utiliza activamente en el diseño moderno, ya que gracias a ella se puede hacer una página "viva" sin el uso de JavaScript. Por ejemplo, usted quiere asegurarse de que cuando se pasa sobre el botón con la clase de BTN su color cambió. Para ello, se utiliza la siguiente estructura:

.btn: hover {

background-color: rojo;

}

La belleza puede ser especificado en las propiedades básicas del botón, la propiedad de transición, por ejemplo, 0,5 s – en este caso, el botón no sonrojarse al instante, y dentro de medio segundo.

– virtudes son ampliamente utilizados para la "reactivación" de páginas. Fácil de usar.

Desventajas – no lo son. Esta es una herramienta muy útil. Sin embargo, los diseñadores web sin experiencia pueden perderse en la abundancia de pseudo-clases. El problema se resuelve estudio y práctica.

pseudo-selectores

"Pseudo" – éstas son las partes de la página que no están en HTML, pero todavía se puede controlar. Que no entendía? Es mucho más fácil de lo que parece. Por ejemplo, usted quiere hacer la primera letra de la cadena grande y roja, dejando el otro texto pequeño y negro. Por supuesto, se puede concluir que la carta en un lapso de una cierta clase, pero es largo y aburrido. Es mucho más fácil para seleccionar todo el párrafo y el uso de pseudo-:: primera letra. Se da la oportunidad de controlar la aparición de la primera letra.

Hay un gran número de pseudo-elementos. Lista de ellos en un solo artículo es probable que tenga éxito. Puede encontrar la información pertinente en su motor de búsqueda favorito.

Ventajas – proporcionan la flexibilidad para personalizar el aspecto de la página.

Desventajas – nuevo para ellos a menudo se confunden. Muchas selecciones de este tipo de trabajo sólo en algunos navegadores.

para resumir

Selector – una poderosa herramienta para el control de flujo de documentos. Gracias a él, puede seleccionar cada componente de la página (hay incluso sólo parcialmente). Asegúrese de aprender todas las opciones disponibles, o incluso escribirlas. Esto es particularmente importante si crea páginas complejas con un diseño moderno y un montón de elementos interactivos.