Els selectors CSS. tipus de selectors

, cadascun dels quals desitja establir un color específic. Com fer-ho? selectors CSS estàndard no són adequats per a les etiquetes, que indiquen els paràmetres per a tots els blocs alhora. La solució és simple. Assignar membres de la classe. Per exemple, el primer va rebre div class = 'vermell', el segon - class = 'blau', tercera - class = 'verd'. Ara poden seleccionar utilitzant taules CSS.

La sintaxi és la següent: Indica un punt ( ""), seguit d'escriure el nom de la classe. Per administrar la primera unitat, utilitzeu la construcció .Xarxa. En segon lloc - .Blue i així successivament.

Important! Es recomana utilitzar valors significatius de l'atribut de classe. Es considera dolenta forma d'utilitzar transliteració (per exemple, krasiviy-Blok) o combinacions aleatòries de lletres / números (ojfh834871). En aquest codi, que estan obligats a confondre, per no parlar de les dificultats que s'enfrontaran als que es dediquen al projecte després. La millor opció - per utilitzar qualsevol metodologia, com BEM.

Avantatges - relativament alta flexibilitat.

Desavantatges - els elements múltiples poden ser una i la mateixa classe, el que significa que seran editats simultàniament. El problema es resol utilitzant la metodologia, així com l'herència de pre-processadors. Assegureu-vos d'obtenir les seves mans menys, Sass o algun altre preprocessador, que simplifiquen enormement el treball.

selector de ID

Sobre aquesta versió codificadors d'opinió i programadors són ambigües. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Alguns tutorials CSS no recomanen l'ús d'identificació, ja que en l'aplicació errònia que puguin causar problemes amb l'herència. No obstant això, molts experts estan activament col·locar-los al llarg del traçat. Vostè decideix. # »), затем имя блока. La sintaxi és la següent: el signe de nombre ( "#"), llavors el nom del bloc. #red. Per exemple, #rojo.

отличается от класса по нескольким параметрам. ID és diferent de la classe de diverses maneres. ID. En primer lloc, la pàgina no pot ser de dos idèntics ID. Se'ls assigna un nom únic. En segon lloc, un selector d'aquest tipus té una prioritat més alta. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Això vol dir que si s'especifica una classe de vermell i s'especifica en les taules CSS vermell color de fons, i després assignar-li el mateix id blau i especificar el color blau, la unitat es torna blau.

Avantatges - Es pot controlar l'element específic, fent cas omís d'estils d'etiquetes i classes.

ID и class. Desavantatges - fàcil perdre en un gran nombre de ID i classe.

Important! ID вам, в общем-то, не нужны. Si utilitzeu la metodologia BEM (o els seus anàlegs), ID perquè, en general, no són necessaris. Aquesta tècnica consisteix en la utilització dels esquemes classes úniques que molt més convenient.

selector universal,

{}. Sintaxi: actrius joves signe ( "*") i els suports, és a dir, {*} ...

S'utilitza per assignar certs atributs una vegada que tots els elements de la pàgina. Quan això pot ser útil? box-sizing: border-box. Per exemple, si desitja establir la propietat de pàgina del quadre-dimensionament: frontera-box. div *{}. No només pot ser utilitzat per a gestionar tots els components del document, sinó també per controlar tots els nens del bloc especificat, per exemple, div * {}.

Avantatges - es pot controlar un gran nombre d'elements alhora.

Contres - no prou com opció flexible. A més, l'ús d'aquest selector, en alguns casos més lent el treball de la pàgina.

per atributs

Que sigui possible controlar l'element amb un atribut específic. Per exemple, vostè té una sèrie d'etiquetes d'entrada amb un tipus d'atribut diferent. Un d'ells - el text, la segona - la contrasenya, la tercera - número. Per descomptat, es pot establir cada classe o ID, però no sempre és convenient. selectors CSS d'atributs fan possible passar valors per a certes etiquetes amb la màxima precisió. Per exemple, així:

d'entrada [ 'text' type =] {}

Aquest selector es seleccionarà tots els atributs amb el tipus de text d'entrada.

L'eina és molt flexible i es pot utilitzar amb qualsevol de les etiquetes, en les que hi pot haver atributs. Però això no és tot! L'especificació CSS té la capacitat de controlar els elements amb més comoditat!

Imagineu que la seva pàgina té entrada amb el marcador de posició atribut = "Introduïu un nom" i marcador de posició d'entrada = "Introduïu la contrasenya". També es poden seleccionar amb el comandament! Per això, utilitzeu la següent estructura:

entrada [marcador de posició = "Introduïu el nom"] {} o l'entrada [marcador de posició = "Introduïu la contrasenya"]

Potser el treball més flexible amb els atributs. Diguem que vostè té una sèrie d'etiquetes amb el títol atributs similars (per exemple, "Caspian" i "Caspian"). Per seleccionar tant, utilitzar les següents seleccions:

[Títol * = "Kaspiysk"]

CSS triarà tots els elements en el títol dels quals hi ha símbols de "Caspian", és a dir. E., I "Caspian" i "Caspian".

També pot triar les etiquetes que comencen amb els atributs d'un cert caràcter:

[^ Títol = "caràcter que desitja"] {}

o posar fi a elles:

[Títol de $ = "caràcter correcte"] {}.

Avantatges - màxima flexibilitat. Podeu seleccionar qualsevol dels elements de pàgina existents sense jugar amb les classes.

Desavantatges - utilitzats amb relativa poca freqüència, només en casos específics. Molts dissenyadors web prefereixen metodologia, ja que la classe punt és més fàcil que per organitzar nombrosos claudàtors i signes "igual". A més, aquests selectors no funcionen en les versions d'Internet Explorer 7 i següents. No obstant això, els que estan ara necessita l'antic Internet Explorer?

selectors de classe de pseudo

Denota un element pseudo-estat. Per exemple,: vol estacionari - el que passa amb la part de la pàgina quan es passa,: visitats - enllaç visitat. També inclou elements com ara: first-child i: l'últim nen.

Aquest tipus de selector s'utilitza activament en el disseny modern, ja que gràcies a ella es pot fer una pàgina "viva" sense l'ús de JavaScript. Per exemple, vostè vol assegurar-se que quan es passa sobre el botó amb la classe de BTN seu color va canviar. Per a això, s'utilitza la següent estructura:

.btn: hover {

background-color: vermell;

}

La bellesa pot ser especificat en les propietats bàsiques del botó, la propietat de transició, per exemple, 0,5 s - en aquest cas, el botó no posar-se vermell a l'instant, i d'aquí a mig segon.

- virtuts són àmpliament utilitzats per a la "reactivació" de pàgines. Fàcil d'utilitzar.

Desavantatges - no ho són. Aquesta és una eina molt útil. No obstant això, els dissenyadors web sense experiència poden perdre en l'abundància de pseudo-classes. El problema es resol estudi i pràctica.

pseudo-selectors

"Pseudo" - aquestes són les parts de la pàgina que no estan en HTML, però encara es pot controlar. Que no entenia? És molt més fàcil del que sembla. Per exemple, vostè vol fer la primera lletra de la cadena gran i vermella, deixant l'altre text petit i negre. Per descomptat, es pot concloure que la carta en un lapse d'una certa classe, però és llarg i avorrit. És molt més fàcil per seleccionar tot el paràgraf i l'ús de pseudo :: primera lletra. Es dóna l'oportunitat de controlar l'aparició de la primera lletra.

Hi ha un gran nombre de pseudo-elements. Llista d'ells en un sol article és probable que tingui èxit. Podeu trobar la informació pertinent al motor de cerca favorit.

Avantatges - proporcionen la flexibilitat per personalitzar l'aspecte de la pàgina.

Desavantatges - nou per a ells sovint es confonen. Moltes seleccions d'aquest tipus de treball només en alguns navegadors.

per resumir

Selector - una poderosa eina per al control de flux de documents. Gràcies a ell, pot seleccionar cada component de la pàgina (hi ha fins i tot només parcialment). Assegureu-vos d'aprendre totes les opcions disponibles, o fins i tot escriure-les. Això és particularment important si crea pàgines complexes amb un disseny modern i un munt d'elements interactius.