Selectores CSS. tipos de selectores

, cada un dos cales pretende establecer unha cor específica. Como facelo? selectores CSS estándar non son axeitados para as etiquetas, eles indican os parámetros para todos os bloques de unha soa vez. A solución é sinxela. Asignar membros da clase. Por exemplo, o primeiro recibiu div class = 'vermello', segunda - class = 'blue', terceiro - class = 'verde'. Agora poden ser seleccionados mediante táboas CSS.

A sintaxe é a seguinte: indica un punto ( ""), seguido por escribir o nome da clase. Para xestionar a primeira unidade, use a construción .Red. Segundo - .blue e así por diante.

Importante! Recoméndase usar valores significativos do atributo de clase. El é considerado malo xeito de utilizar transliteración (por exemplo, krasiviy-Blok) ou combinacións aleatorias de letras / números (ojfh834871). Neste código, vostede está obrigado a ficar confuso, sen esquecer as dificultades que han enfrontar os que estarán implicados no proxecto logo de ti. A mellor opción - para usar calquera metodoloxía, como ben.

Vantaxes - relativamente alta flexibilidade.

Desvantaxes - os distintos elementos pode ser unha ea mesma clase, o que significa que eles van ser editado simultaneamente. O problema está resolto a través da metodoloxía, así como herdanza de pre-procesadores. Asegúrese de chegar nas súas mans menos Sass ou algún outro pre-procesador, que simplifican moito o traballo.

selector de ID

Sobre esta versión codificadores de opinión e programadores son ambiguos. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Algúns tutoriais CSS non recomendo o uso de ID, porque na aplicación imprecisas poden causar problemas coa herdanza. Con todo, moitos especialistas están activamente organiza-los en todo o esquema. Vostede decide. # »), затем имя блока. A sintaxe é a seguinte: o sinal de libra ( "#"), entón o nome do bloque. #red. Por exemplo, #red.

отличается от класса по нескольким параметрам. ID é diferente da clase de varias maneiras. ID. En primeiro lugar, a páxina non pode ser dous ID idénticos. Son atribuídos un nome único. En segundo lugar, tal selector ten unha prioridade maior. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Isto significa que se especifica unha clase de unidades vermello e especificar en táboas CSS vermello cor de fondo, a continuación, asignar a el o mesmo ID de azul e especificar a cor azul, a unidade farase azul.

Vantaxes - pode controlar o elemento específico, estilos de marcas e clases ignorando.

ID и class. Desvantaxes - fácil perderse nun gran número de ID e clase.

Importante! ID вам, в общем-то, не нужны. Se está a usar a metodoloxía ben (ou os seus análogos), ID-lle, en xeral, non son necesarios. Esta técnica implica o uso de esquema de clases exclusivas que moito máis cómodo.

selector universal

{}. Sintaxe: Sinal Starlets ( "*") e tirantes, é dicir, {*} ...

Usado para asignar certos atributos xa a todos os elementos da páxina. Cando isto pode ser útil? box-sizing: border-box. Por exemplo, se quere definir a propiedade páxina caixa-sizing: Beira-box. div *{}. non só se pode usar para xestionar todos os compoñentes do documento, pero tamén para controlar todos os nenos do bloque especifica, por exemplo, div * {}.

Vantaxes - pode controlar un gran número de elementos de cada vez.

Contra - opción flexible non é suficiente. Ademais, o uso deste selector, nalgúns casos, abrandar o traballo páxina.

por atributos

Fai o posible para controlar o elemento cun atributo específico. Por exemplo, ten unha serie de etiquetas de entrada con un tipo de atributo diferente. Un deles - o texto, o segundo - contrasinal, o terceiro - número. Por suposto, pode configurar cada clase ou ID, pero non sempre é conveniente. selectores CSS de atributos fan posible especificar valores para certas marcas coa máxima precisión. Por exemplo, así:

input [ 'texto' type =] {}

Este selector seleccionará todos os atributos do tipo de texto de entrada.

A ferramenta é moi flexible e pode ser usado con calquera das marcas, nos cales pode haber atributos. Pero iso non é todo! A especificación CSS ten a capacidade de controlar os elementos con aínda máis comodidade!

Imaxina que a súa páxina ten entrada co espazo reservado atributo = "Introduza un nome" e espazo reservado entrada = "Escriba o contrasinal". Eles poden ser seleccionados mediante o selector! Para iso, use a seguinte estrutura:

input [espazo reservado = "Introduza o nome"] {} ou input [espazo reservado = "Escriba o contrasinal"]

Quizais o traballo máis flexible con atributos. Imos dicir que ten un número de etiquetas con título atributos similares (por exemplo, "Caspian" e "Caspian"). Para seleccionar tanto, usa as seguintes seleccións:

[Título * = "Kaspiysk"]

CSS vai escoller todos os elementos no título dos que hai símbolos de "Caspian", ie. E., e "Caspian" e "Caspian".

Tamén podes escoller as etiquetas que comezan cos atributos dun determinado personaxe:

[Título ^ = "personaxe que quere"] {}

ou rematar elas:

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

Vantaxes - o máximo de flexibilidade. Pode seleccionar calquera páxina elementos existentes sen mexer coas clases.

Desvantaxes - utilizados relativamente poucas veces, só en casos específicos. Moitos web deseñadores prefiren metodoloxía, xa que a clase punto é máis fácil do que para organizar numerosas corchetes e sinais "igual". Ademais, estes selectores non funcionan en versións de Internet Explorer 7 e abaixo. Con todo, quen son agora precisa da idade de Internet Explorer?

selectores de pseudo-clase

Indica un elemento de estado pseudo. Por exemplo pair,: - o que pasa coa parte da páxina cando pasa o rato,: visitou - a ligazón visitado. Tamén inclúe elementos como: First-child e: last-child.

Este tipo de selector se usa activamente no deseño moderno, porque grazas a el pode facer unha páxina de "en directo" sen o uso de JavaScript. Por exemplo, quere estar seguro de que cando pasa o rato sobre o botón coa clase de BTN súa cor alterada. Para iso, usan a seguinte estrutura:

.btn: hover {

background-color: red;

}

A beleza pode estar nas propiedades básicas do botón, a propiedade de transición, por exemplo, 0.5s - neste caso, o botón non corar instantaneamente, e dentro de medio segundo.

Virtudes - son amplamente utilizados para o "renacemento" de páxinas. Fácil de usar.

Desvantaxes - eles non son. Esta é unha ferramenta realmente útil. Con todo, deseñadores web inexperientes poden perderse na abundancia de pseudo-clases. O problema está resolto estudo e práctica.

pseudo-selectores

"Pseudo" - estas son as partes da páxina que non están en HTML, pero eles aínda poden ser xestionados. Non entendeu? É moito máis fácil do que parece. Por exemplo, quere facer a primeira letra na secuencia grande e vermello, deixando o outro texto pequeno e negro. Por suposto, pódese concluír que a carta nun período con certa clase, pero é longo e aburrido. É moito máis fácil para seleccionar todo o parágrafo e utilizar pseudo :: first-letter. El dá a oportunidade para controlar o aspecto da primeira letra.

Hai un gran número de pseudo-elementos. Incluílo los nun único artigo é improbable ter éxito. Podes atopar a información relevante no seu motor de procura favorito.

Vantaxes - proporcionan a flexibilidade para personalizar a aparencia da páxina.

Desvantaxes - novas para eles son frecuentemente confundidos. Moitas seleccións de este tipo de traballo só en determinados navegadores.

para resumir

Selector - unha poderosa ferramenta para o control de fluxo de documentos. Grazas a el, pode seleccionar cada compoñente da páxina (hai aínda só parcialmente). Asegúrese de aprender todas as opcións dispoñibles, ou mesmo escribilas. Isto é especialmente importante se crear páxinas complexas cun deseño moderno e unha morea de elementos interactivos.