Въведение във видовете CSS селектори
Типовете CSS селектори се използват за избор на съдържанието, което искаме да стилизираме. Той помага при избора на елементи въз основа на техния клас, id, тип и т.н. CSS Selector е компонент на CSS Ruleset.
Видове CSS селектори
На разположение за нас са 5 разновидности на CSS селектори. Ще разгледаме следните важни CSS селектори:
- CSS Universal Selector.
- CSS елемент за избор.
- CSS Id Selector.
- CSS селектор на класове.
- CSS Селектор на атрибути.
1. CSS Universal Selector
В HTML страница съдържанието зависи от HTML маркерите. Двойка маркери определя конкретен елемент на уеб страница. Универсалният селектор на CSS избира всички елементи на уеб страница.
Пример:
* (
color: blue;
font-size: 21px;
)
Тези два реда код, заобиколени от къдравите скоби, ще засегнат всички елементи, присъстващи на HTML страницата. Декларираме универсален селектор с помощта на звездичка в началото на къдравата скоба. Universal Selector може да се използва заедно с другите селектори в комбинация.
2. CSS елемент за избор
CSS Element Selector е известен и като селектор на тип. Element Selector в CSS се опитва да съвпада с HTML елементи със същото име. Следователно, селектор на
- съвпада с всички
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- CSS3 Cheatsheet
- CSS въпроси за интервю
- SASS срещу SCSS
- Въпроси за интервю за SASS
- Примери за списък с подредени HTML
- елементи, т.е. всички непоредни списъци в тази HTML страница.
Нека разгледаме пример за селектора на елементи.
ul (
border: solid 1px #ccc;
)
За да разберем това по-добре, нека разгледаме примерен HTML код, за да приложим CSS кода, който написахме по-горе.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Демо текст
В този пример ще намерим главно три елемента, а именно
- елемент, тагът и друг
- елемент. Тъй като нашият CSS код се прилага за
- конкретно, промените в границата ще бъдат направени само за нашите
- тагове, а не за маркерите. Обикновено тези промени не се отнасят за съдържанието на
- също, но в някои сценарии стиловете могат да се прилагат към вътрешните елементи.
3. CSS ID Selector
CSS селекторът помага на програмиста да съпостави идентификатора, създаден от разработчика, към неговото стилизиращо съдържание. ID Selector се използва с помощта на хеш (#) знак, преди името, декларирано от програмиста. Селекторът на ID съвпада с всеки HTML елемент, притежаващ атрибут ID със стойността, същата като тази на селектора, без хеш знак.
Ето пример:
#box (
width: 90px;
margin: 10px;
)
Този CSS код може да се използва, за да съответства на елемента, който има идентификационното поле ', както в следващото изречение.
Тук тагът е само пример. Можем да напишем атрибута ID за всеки HTML маркер. Селекторът на ID съвпада с атрибута ID в елемента и търси неговата стилистика. В нашия пример стайлингът се прилага, стига всеки елемент да съдържа атрибута ID „поле“.
Стойността на използвания идентификатор се предполага, че е уникална. Ако един и същ идентификатор се използва за два или повече елемента, кодът е технически невалиден, но стилирането на елемента все още ще се прилага, поради което обикновено се избягва един и същ идентификатор.
Трябва да използвате всеки път различен идентификатор за всяка HTML страница, е доста твърдо. Освен че се сблъскват с проблеми с твърдостта, селекторите на ID в CSS също се сблъскват с проблема за специфичността.
4. CSS клас за избор
Селекторът за клас CSS е един от най-полезните селектори от всички селектори. Декларира се с помощта на точка, последвана от името на класа. Името на този клас се определя от кодера, както е в случая с селектора на ID. Селекторът на клас търси всеки елемент, който има стойност на атрибут със същото име като името на класа, без точка.
Пример:
.square (
margin: 20px;
width: 20px;
)
Този CSS код може да се използва за съпоставяне на елемента, който има клас 'квадрат, като в следващото изречение.
Този стил се прилага и за всички останали HTML елементи, които имат стойност на атрибут за класа като „квадрат“. Елемент със същата стойност на атрибут на клас ни помага да използваме повторно стиловете и избягваме излишното повторение. Освен това, Class Selector е полезен, защото ни позволява да добавим няколко класа към определен елемент. Можем да добавим повече от един клас към атрибута, като разделяме всеки клас с интервал.
Пример:
Тук квадрат, удебелен и форма са три различни типа класове.
5. CSS Селектор на атрибути
CSS селекторът на атрибути стилизира съдържанието според атрибута и стойността на атрибута, споменати в квадратните скоби. Пред квадратната скоба на отваряне не може да има интервали.
input(type="text") (
background-color: #fff;
width: 100px;
)
Този CSS код ще бъде съвпадение за следния HTML елемент.
По същия начин, ако стойността на атрибута 'type' се промени, селекторът Attribute не би го съпоставил. Например, селекторът няма да съвпада с атрибута, ако стойността на „type“ се промени от „text“ на „submit“. Ако селекторът на атрибут е деклариран само с атрибута и няма стойност на атрибута, той ще съвпада с всички HTML елементи с атрибута 'type', независимо дали стойността е 'text' или 'submit'.
Пример:
input(type) (
background-color: #fff;
width: 100px;
)
Можем също така да използваме селектори на атрибути без спецификация на стойност извън квадратните скоби. Това ще ни помогне да се насочим само към атрибута, независимо от елемента. В нашия пример той ще се насочва въз основа на атрибута 'type', независимо от елемента 'input'. CSS селекторите ни помагат да опростим нашия код и ни дават възможност да използваме и използваме един и същ CSS код за различни HTML елементи. Те ни помагат да оформяме конкретни сегменти и части от нашата уеб страница. Те ни предоставят възможност за равномерно оформяне на подобни елементи в нашата уеб страница. Следователно CSS селекторите са важна част от кривата на обучение на CSS.
Препоръчителни статии
Това е ръководство за Видовете CSS селектори. Тук сме обсъдили различните видове CSS селектори с пример. Можете да разгледате и другите ни предложени статии, за да научите повече -