Начало на CSS
CSS разчита на правила за съвпадение на шаблони, за да определи кой стил се отнася за кой елемент в документа. Тези модели се наричат селектори и те варират от имена на маркери (например p, за да съответстват на маркерите на абзаци) до много сложни модели, които съответстват на много специфични части от документ (например p # myid> b.highlight би съответствал на всеки б маркер с клас на подчертаване, който е дете на параграфа с id myid).
Изборът на CSS е част от обаждане в стил CSS, което идентифицира коя част от уеб страницата трябва да бъде оформена. Селекторът съдържа една или повече свойства, които определят как избраният HTML ще бъде оформен.
Селекторите на CSS
Има няколко различни вида селектори:
- тип селектори - отговарящи на конкретен елемент
- клас селектори - съвпадащи елементи с определен клас
- Селектори на идентификационни номера - отговарящи на елемента с конкретен идентификационен номер
- селектори наследници - елементи, които са потомци на конкретен елемент
- детските селектори - съвпадащи елементи, които са дете на конкретния елемент
- универсални селектори - отговарящи на всеки елемент
- съседни сестри-селектори - съвпадащи елементи, непосредствено предхождани от конкретен елемент
- атрибути на селектори-атрибути със специфичен атрибут или стойност на атрибут
- псевдокласни селектори - съвпадащи елементи със специфичен псевдо класа
- псевдоелементни селектори - съвпадащи елементи със специфични псевдоелементни свойства
Форматиране на CSS стилове и CSS селектори
Форматът на стила на CSS изглежда така:
селектор {style property: style; }
Разделете множество селектори, които имат същия стил със запетаи. Това се нарича селекторно групиране. Например:
selector1 , selector2 {style property: style; }
Групирането на селекторите е механизъм за стенография, за да поддържате компактните си стилове на CSS.
Горното групиране ще има същия ефект като:
selector1 {style property: style; }
selector2 {style property: style; }
Винаги тествайте вашите CSS селектори
Не всички браузъри поддържат всички селектори на CSS. Така че не забравяйте да тествате селекторите си в толкова браузъри на колкото се може повече операционни системи, колкото можете. Но ако използвате CSS 1 или CSS2 селектори, трябва да сте добре.