CSS селектори и подробности

Che Chessheet CSS Selectors

Наскоро се гмурнах в CSS селектори.

Има толкова много CSS селектори с непознати символи,>. , * + ~ [] и т.н., така че често ме объркват как работят CSS селекторите. В крайна сметка ги изправих в главата си и ги проектирах как разбирам.

* Всъщност бих искал да ги организирам на една страница с размер А4, за да запазя документи и да спася Земята, но не можах, тъй като има толкова много селектори, които исках да добавя, така че трябваше да прегледам повече от една страница , Това е и четирите A4 страници, с изключение на коричните.

Отпечатайте този мамят и го залепете на стената. Не ги запомняйте, а само надничайте. Надявам се тази инфографика да ви помогне бързо да намерите правилните CSS селектори и да ви спести време.

Избор на CSS селекториИгра на CSS селектори от Райън Ю

Отидете да изтеглите Chesheet CSS Selectors и се насладете на играта🕹

Няма проблем. Всичко е безплатно.

Гмурнете се в CSS селектора.

Ще изброя инфографиката заедно с MDN определенията, за да улесня нещата за вас.

Тип селектор

Селекторът на тип CSS съвпада с елементите по име на възел. С други думи, той избира всички елементи от дадения тип в рамките на документ. - MDN

Тип селектор

Селектор на ID

Избира елемент въз основа на стойността на неговия атрибут id. Трябва да има само един елемент с даден идентификационен номер в документ. - MDN

Селектор на ID

Селектор за потомци

Всеки елемент, съвпадащ с B, който е потомък на елемент, съвпадащ с A (тоест дете или дете на дете и т.н.). комбинаторът е едно или повече пространства или двойни по-големи от знаци. - MDN

Селектор за потомци

Комбинирайте селекторите на низходящия и идентификационния номер

Комбинирайте селекторите за низходящи и идентификационни номера

Селектор за клас

CSS селекторът на класове съвпада с елементи въз основа на съдържанието на атрибута на техния клас. - MDN

Селектор за клас

Комбинирайте класовия селектор

Комбинирайте класовия селектор

Комбинатор със запетая

Всеки елемент, съвпадащ с А и / или В. - MDN

Комбинатор със запетая

Универсалният селектор

Просто изберете всичко!

Универсалният селектор

Комбинирайте универсалния селектор

Комбинирайте универсалния селектор

Съседен селекционер

Съседният комбиниращ комбинатор (+) разделя два селектора и съвпада с втория елемент само ако веднага следва първия елемент и двамата са деца на един и същ родителски елемент. - MDN

Съседен селекционер

Общ избор на братя и сестри

Общият комбинатор на братята (~) разделя два селектора и съвпада с втория елемент само ако следва първия елемент (макар и не непременно веднага) и двамата са деца на един и същи родителски елемент. - MDN

Общ избор на братя и сестри

Детски селектор

Детският комбинатор (>) се поставя между два CSS селектора. Той съвпада само с тези елементи, съчетани от втория селектор, които са деца на елементи, съчетани с първия. - MDN

Детски селектор

Псевдоселектор на първо дете

CSS псевдоклас на първо дете представлява първия елемент сред група братята елементи. - MDN

Псевдоселектор на първо дете

Само детски псевдоселектор

CSS псевдокласът само: дете представлява елемент без никакви братя и сестри. Това е същото като: първо дете: последно дете или: nth дете (1): nth-last-дете (1), но с по-ниска специфичност. - MDN

Само детски псевдоселектор

Последен детски псевдоселектор

CSS псевдоклас с последно дете представлява последния елемент сред група братята елементи. - MDN

Последен детски псевдоселектор

N-ти детски псевдоселектор

CSS псевдокласът: nth-child () съответства на елементи въз основа на тяхната позиция в група братя и сестри. - MDN

N-ти детски псевдоселектор

Седмият последен селекционер на дете

CSS псевдокласът: nth-last-child () съответства на елементи въз основа на позицията им сред група братя и сестри, като се брои от края. - MDN

Седмият последен селекционер на дете

Първо от селектор на тип

CSS първият тип тип псевдоклас представлява първият елемент от неговия тип сред група братята елементи. - MDN

Първо от селектор на тип

Nth от селектора на типа

CSS псевдокласът nth-of-type () съответства на елементи от даден тип въз основа на позицията им сред група братя и сестри. - MDN

Nth от селектора на типа

N-ти от тип селектор с формула

Селектор от четвърти тип
Забележка:
: Тото-на-тип (дори)
: Тото-на-тип (странно)
: Тото-на-тип (2)
: Тото-на-тип (2N)
: Тото-на-тип (3n-1)
: Тото-на-тип (2n + 2)

Само от селектор на типове

CSS псевдокласът само от тип представлява елемент, който няма братя и сестри от същия тип. - MDN

Само от селектор на типове

Последен от селектор на тип

CSS за последен тип CSS псевдоклас представлява последния елемент от неговия тип сред група братя елементи. - MDN

Последен от селектор на тип

Празен селектор

: Празният CSS псевдоклас представлява всеки елемент, който няма деца. Децата могат да бъдат или възлови елементи или текст (включително бялото пространство). Коментарите, инструкциите за обработка и съдържанието на CSS не влияят дали даден елемент се счита за празен. - MDN

Празен селектор

Отрицация Псевдоклас

CSS псевдокласът: не () представлява елементи, които не съвпадат със списък от селектори. Тъй като предотвратява избирането на конкретни елементи, той е известен като отрицателен псевдоклас. - MDN

Отрицация Псевдоклас

Селектор на атрибути

Селекторите на атрибути са специален вид селектор, който ще съответства на елементи въз основа на техните атрибути и стойности на атрибутите. Техният общ синтаксис се състои от квадратни скоби ([]), съдържащи име на атрибут, последвано от незадължително условие, което да съвпада със стойността на атрибута. Селекторите на атрибути могат да бъдат разделени на две категории в зависимост от начина, по който съвпадат със стойностите на атрибутите: Селектори на присъствие и стойност на атрибути и селектори на атрибути на стойности на подреда. - MDN

Селектор на атрибути

Селектор на стойност на атрибута

Селектор на стойност на атрибута

Атрибут започва със селектор

Този селектор ще избере всички елементи с атрибута attr, за които стойността започва с val. - MDN

Атрибут започва със селектор

Атрибут завършва със селектор

Този селектор ще избере всички елементи с атрибута attr, за които стойността завършва с val. - MDN

Атрибут завършва със селектор

Атрибут Селекторни символи

Този селектор ще избере всички елементи с атрибута attr, за който стойността съдържа подреда val. (Подструната е просто част от низ, например "cat" е подреждане в низа "гъсеница".) - MDN

Атрибут Селекторни символи

Поздравления, завършихте

Статии

🕹 CodePen

Всякакви въпроси или обратна връзка

Бих искал да чуя вашите отзиви за това как мога да го направя по-добър за вас. Моля, оставете коментарите си по-долу или през моя Twitter.

Големи благодарности на Райън Ю за това, че ми помогна да направя CSS селекторна игра. Райън Ю е автор на , където научих много готини техники отпред.

Честит кодов знак днес