30 селектори CSS, което трябва да запомните
Нека преди да преминат към по-напреднали селектори CSS, ние новаците може да преодолеят най-прост и очевиден.
HTML5 и CSS3 практика от нула до резултата!
Звездичката ще избере всеки отделен елемент на страницата. Много разработчици използват този метод до нула на маржа и подложка. Въпреки, че това със сигурност е добро за бърза проверка, бих ви посъветвал да не го използвате в производството код. Той добавя твърде много тегло и браузърът не е необходимо.
Asterisk * може да се използва за деца селектори.
Той избира всеки един елемент е дете на #container на DIV. Отново, не се опитват да използват тази техника, твърде често, или да не се използва.
съвместимост
Забележка # символ като селектор префикс ви позволява да направите избор на идентификатора. Това е без съмнение най-честата употреба обаче, когато с помощта на идентификационните селектори внимателно.
Задайте си въпроса: Аз абсолютно трябва да се обвърже за проба номер на този елемент?
Id селектори нерешим и не позволяват повторна употреба. Ако е възможно, първо се опита да използва името на етикет, един от най-новите HTML5 елементи, или дори псевдо-класа.
съвместимост
Това - клас селектор. Разликата между идентификатора и class'ami, че при използването на последния, можете да изберете няколко елемента. Използвайте class'y, когато искате да прилагате стилове към група от елементи. Освен това, използването на идентификатора за намиране на игла в купа сено, и приложите стил към един единствен елемент.
съвместимост
Професионален съвет - Ако вашият селектор прилича X Y Z А B.error, което правите погрешно. Винаги си зададете, е, че наистина е абсолютно необходимо да се използва всичко това натоварване.
съвместимост
Какво става, ако искате да изберете всички елементи на страницата в зависимост от техния вид, а не от името на техния идентификационен номер или class'a? Направете по-лесно и се използва за избор на тип. Ако искате да изберете всички неподредените, използвайте ул <>.
съвместимост
6. X: X посети и: линк
За да изберете всички автомати маркер, които все още трябва да кликнете, ние използваме псевдо: линк.
Като алтернатива, имаме псевдо-класа: посетили. която има за цел да ни позволи да се прилагат специални стилове в маркерите само автомати на страницата, на която вече са кликнали, или които са посетили.
съвместимост
Този пост сочи към съседния избор. Само ще избере елемент непосредствено предшестван от елемент от шаблона. В този случай, първият параграф след всяко ул елемент ще има червен текст.
съвместимост
Разликата между един обикновен X Y и X> Y е, че последният ще избере само преките детски елементи. Например, имайте предвид следното маркиране.
Selector #container> ул ще изберете само тези, които целят ul'y, които са преки потомци на DIV с идентификатор контейнер. Той не се избират, например, първият потомък ул Ли.
съвместимост
Това сестра Combinator е идентични единици и X + Y, обаче, е по-малко строги. Докато съседен селектор (ул + п) избира само първият елемент, който непосредствено предхожда шаблон елемент, по-често за избор. В горния пример, той ще избере който и да е елемент стр толкова дълго, колкото те следват ул.
съвместимост
10. X [заглавие]
За разпределяне между атрибут селектори. в примера по-горе, той избира само най-анкерни таговете с титлата на атрибут. Anchor маркери, които не разполагат с него, не получават този конкретен стил. Но какво, ако имате нужда от специален повод. Ами ...
съвместимост
11. X [HREF = "Foo"]
съвместимост
12. X [HREF * = "nettuts"]
Ето тук да отидем; Ето какво ни трябва. Звездичката показва, че настоящата стойност трябва да се появи някъде в стойността на атрибут. По този начин то се отнася nettuts.com, net.tutsplus.com и дори tutsplus.com.
Не забравяйте, че това е една широка изявление. Какво ще се случи, когато таг-свързващ свързва с някои сайтове, които не се намират на Envato, с поредица Tuts в url'e? Ако искате да се определи по-точно, да се използва ^ и # 038; да се отнасят съответно до началото и в края на линията.
съвместимост
13. X [HREF ^ = "HTTP"]
Това се прави лесно да се използва знакът ^ ( "ct"). Той се използва най-често в регулярните изрази за обозначаване на началото на реда. Ако искате да изберете всички тагове куки с HREF, започвайки с HTTP, можете да използвате селектор подобно на горния фрагмент.
Сега, ако ние трябваше вместо това, да определи стила всички котви, които сочат към, да речем, една снимка? В този случай, нека да погледнем на края на линията.
съвместимост
14. X [HREF $ = ". Jpg"]
Отново, ние използваме познатите регулярни изрази, $, да се позове на края на линията. В този случай, ние намираме всички автомати, които сочат към картинката - или най-малкото url'b завършва на .jpg. Не забравяйте, че това е най-вероятно да не работи с файлове във формат GIF, PNG и.
съвместимост
15. X [данни - * = "Foo"]
Назад към номер осем; как да регулирате всички тези различни видове изображения: PNG, JPEG, JPG, GIF? Е, ние може да създаде множество селектори, като например:
Но тъй като ние сме се създава главоболие и, освен това, че е неефективен. Друго решение - използването на потребителски атрибути. Какво се случва, когато добавяте свои собствени данни файлов тип атрибут на всеки задължителен, които водят към изображения?
След това, с помощта на този готов за получаване на сигнал, че е възможно да се използва стандартен селектор на атрибут, за да изберете само желаните автомати.
съвместимост
Но функцията, която можете да изненадате приятелите си. Това допускане не знае твърде много хора. Знакът "тилда" (
) Позволява ви да изберете целта на списъка с атрибут на ценности, разделени с интервал.
Според по-горе потребителски атрибут от номер петнадесет, бихме могли да създадем атрибут на данни информация, която може да се получи пространство, разделени на нещо, което трябва да бъде маркирана. В този случай, ние се отбележи, външните препратки и линкове към снимки - само като пример.
С помощта на готови за употреба за маркиране, сега ние можем да избираме тагове и да е от тези стойности, като се използва за избор на техника атрибут
съвместимост
17. X: проверява
Тази псевдо-класа избира доказана само потребителски интерфейс елемент - като бутон за избор или отметка Централна (правоъгълник, за да отбележат избрания режим, състоянието или действието (на екрана)). Точно както ABC.
съвместимост
HTML5 и CSS3 практика от нула до резултата!
18. X: след
Псевдо преди и след свързването на всички. Изглежда, нови и творчески начини за тяхното използване са ефективни всеки ден. Те просто се образува съдържанието около избрания елемент.
Мнозина бяха запознати с тези класове на първата среща с хак ясно поправката.
Този хак използва: след псевдо-връзка за интервал след елемента, а след това го почистите. Този прекрасен прием трябва да има в своя инструментариум, особено в случаите, когато не е възможно да се използва метода на преливане: скрит.
Според селектори CSS3 спец технически трябва да използвате псевдо-синтаксис на две колони. Въпреки това, за да останат заедно, на потребителския агент просто ще използват един и дебелото черво.
съвместимост
19. X: висене
О, хайде! Това, което знаете. Официалният термин за това: действие на потребителя псевдо клас (псевдо-действията на потребителите). Името е объркващо, но това не е така в действителност. Искате ли, когато потребителят остава върху даден елемент, се прилагат специални стилове? Той ще си свършат работата!
Не забравяйте, че по-стара версия на Internet Explorer не отговаря за използването на: навъртам псевдо клас за нещо различно от таг-връзка.
Най-често използваме този селектор когато се прилага за тагове, котви, например, граничен дъно. когато се извършват върху тях с мишката.
Професионален съвет - гранично-отдолу: 1px плътно черно; Тя изглежда по-добре, отколкото текст декорация: подчертае; ,
съвместимост
20. X: не (селектор)
В псевдо-отказ е изключително полезно. Да кажем, че искате да изберете всички divs, с изключение на един, който е контейнера за самоличност. Фрагмент от посоченото по-горе ще си свършат работата перфектно.
Или, ако исках да изберете всеки един елемент (не се препоръчват), с изключение на параграф тагове, които могат да се извършват:
съвместимост
21. X :: pseudoElement
Можете да използвате псевдо (даден.) За елементите стилове фрагменти предназначение, като на първия ред или първата буква. Не забравяйте, че за да има ефект, те трябва да се прилагат за блокиране на ниво елементи.
Псевдо се състои от две колони :.
Изберете първата буква на параграф
Този пасаж - избор, който ще намерите всички параграфи на страницата, а след това dovyberet само първата буква на елемента.
Най-често тя се използва за създаване на "вестник" стил на първия абзац на писмото.
Подобно псевдо. първа линия, а има и очакваните стилове определят само първия ред елемент.
"За съвместимост със съществуващите стилови листове, потребителски агенти също трябва да приемат означението (нотация) на предишния дебелото черво за псевдо-слабо представени на нива 1 и 2 CSS (т.е. от първа линия от първа писмо преди и: ... След). Тази съвместимост не е дадено ново псевдо-представени в тази спецификация "- източник
съвместимост
22. X: тото-дете (п)
Помниш ли, когато не сме имали възможността да се разпределят отделните елементи в стека? Псевдо-тото-детето решава този проблем!
Моля, имайте предвид, че тото-дете приеме параметър цяло число, обаче, тя не започва от нулата. Ако искате да изберете втория елемент в списъка, използвайте Ли: тото-дете (2).
Възможно е дори да го използвате, за да изберете набор от помощни променливи. Например, можем да направим ли: тото-дете (4n), за да маркирате всеки от четвъртата позиция в списъка.
съвместимост
23. X: тото последна дете (п)
Какво ще получите, ако сте имали огромен списък с елементи в ул и трябваше само да се прилага по отношение на, да речем, алинея трета от края? В допълнение към Ли: тото-дете (397), можете да използвате вместо псевдо-тото-миналата-дете.
Тази техника работи почти по същия начин както по-горе номер шестнайсет, обаче, разликата се крие във факта, че той започва от края и да работят заедно в обратната посока.
съвместимост
24. X: тото-на-тип (п)
От време на време, вместо да изберете едно дете елемент (дете), ще трябва да се избере в зависимост от типа (тип) елемент.
Представете си оформление, което съдържа пет неподредените списъци. Ако искате да зададете на само една трета стилове ul'u и не са с уникален идентификатор за свързване, можете да използвате и псевдо-тото-на-тип (н). Има около тях в горната част на рамката ще бъде едва третият ул.
съвместимост
25. X: тото последна от тип (п)
Да, пребиваващи до късно логично, все още можем да използваме тото-последната от тип, за да започнем с това в края на списъка на селектори и да се премести в посока, обратна на проба от желания от вас.
съвместимост
26. X: първо дете
Тази структурна псевдо клас ни позволява да изберете само първото дете на неговата майка. Често ще го използвате, за да премахнете рамките на първия и последния елемент в списъка.
Да предположим, че имате списък от низове, всеки от тях съдържа граничен отгоре и гранично-отдолу. С тази уговорка, първият и последната точка в тази група ще изглежда малко странно.
За да коригирате това, много дизайнери използват класове първата и последната. Вместо това, можете да използвате тези псевдо-класовете.
съвместимост
27. X: последната дете
За разлика от първото дете, последното дете изберете последния елемент на майка елемент.
Да се изгради един прост пример да демонстрира един от възможните начини за използване на тези класове. Създаване на елемент от списъка, който има стилове.
Няма нищо специално; само един прост списък.
Тези стилове определят основата, махнете отстъп браузър по подразбиране ул и се прилага за всеки рамка ли да се осигури дълбочина.
За да добавите към своите задълбочени списъци прилага граница дъно на всеки ли, на сянка или две по-тъмен от цвета на фона Ли. След това нанесете граница на върха за няколко нюанса по-леки.
Както се вижда на снимката по-горе, единственият проблем е, че рамката ще се прилага за най-горната част и долната част на неподреден списък - това изглежда странно. Нека да решим този проблем, използвайте псевдо-класове: първо дете и: последната деца.
Това е начинът, по; всички фиксирани!
съвместимост
В псевдо-първи от тип позволява да изберете първите братя и сестри (братя и сестри) си вид.
Сега, без да четете по-нататък, опитайте се да разбера как да изберете само «Списък т.2". Когато се стигне до решение (или предаване), продължете да четете.
За решаването на този тест може да бъде в много отношения. Ще разгледаме някои от тях. Нека започнем с използването на първия по тип.
Този пасаж, всъщност, се казва: "Намери първия неподреден списък на страницата, след това се намери само на преките дъщерни елементи, които са елементи от списъка. На следващо място, филтрира всяка втора позиция в сет листа. "
Вторият вариант е да се използва полу-селектор.
В този сценарий, ние намерите UL, непосредствено след етикет р и намерете най-скорошната от децата си.
Може да им навреди или да играете с тези селектори, колкото искате.
Този път ние се първи UL на страницата, и след това намерете първия елемент в списъка, но като се започне от края!
съвместимост
заключение
Ако регулирате по-старите браузъри, като Internet Explorer 6, вие все още трябва да бъдат внимателни при използването на новите селектори. Но, моля, не позволявайте на страха ви от тяхното изследване. Вие сами лоша услуга от това. Чувствайте се свободни да се покажат тук за списък на съвместимостта на браузърите. Като алтернатива, можете да използвате един красив скрипт IE9.js Дийн Edward'a селектори за предоставяне на тази подкрепа в по-стари браузъри.
Благодаря ви за четене на урок CSS селектори, надявам се да са се научили няколко трика!
Преведено и редактирана от: Виктор Хорн и Андрю Bernatsky. webformyself екип.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма
