Просто казано, псевдо-: разшири () автоматизира процеса по-долу:
Въведена през v1.4.0
В горния селектора правило: Доколко ще се използва за "разширяване на селектор» (НСА ул) на клас .inline, където се показва .inline клас. Декларация блок ще остане както е, без никаква връзка с разширяването (като продължение - това не е CSS).
Резултатът:
Забележете как селектора навигация ул: разшири (.inline), както е преобразуваната изхода навигация ул - разширение отстранена преди изход, и селектор блок остава непроменен. Ако блокът не се инвестира във всеки имот, той се отстранява от изхода (но разширението все още може да повлияе на други селектори).
Синтаксис: разширяване ()
В псевдо-класа: разширяване () или да се присъединят селектора, или поставени в набор от правила. Изглежда параметър селектор псевдо-клас, по избор последвано от Мрежа всички:
Разширяване на селектори може да съдържа един или повече класове, разделени със запетая. Например:
Разширяване на селектори свързани към селектор
Разширяване на селектори свързани към избор, изглежда като нормална параметър псевдо-клас като селектор. Селектор може да съдържа някаква степен, но всички те трябва да се изправят в края на селектора.
- Разширете след селектор: предварително: навъртам: разшири (Разделение предварително).
- Разширяване между избор и разликата може да се настрои: предварително: висене: разширяване (DIV предварително).
- Можете да поставите някаква степен: предварително: навъртам: разшири (Разделение предварително): разшири (.bucket TR) - Същото като преди: задръжте курсора: разшири (Разделение предварително кофа TR.)
- А това е невъзможно: предварително: навъртам: разшири (Разделение предварително) .nth-дете (странно). Разширете да стои в края.
Ако набор от правила, съдържа няколко селектори, нито един от тях може да се разшири. Няколко селектори за разширяване в един и същ набор от правила:
Context групиране
Разширяване на селектори (Разширяване) може да се постави вътре набор от правила, с помощта на синтаксиса : Разширяване (селектор). Поставянето на псевдо: разшири () в тялото е един вид етикет, за да бъдат поставени във всяка селектор на този набор от правила.
Разширете в рамките на набор от правила:
Същото като добавяне удължи след всеки селектор:
Групирането на вътрешните селектори
Разширяване кутия група вътрешни селектори. Например:
Резултатът:
В действителност, разширяването на гледане на компилиран CSS, отколкото оригиналния малко-кода. Например:
Точно съвпадение с Разширяване
разширение по подразбиране селектори (Разширяване) се търси точно съвпадение между селектори. Дали селектор използва "гост-звезда". Няма значение, че двете N-ДЪРЖАВНИТЕ понятия имат една и съща стойност, те трябва да бъдат еднакво оформена да бъде един и същ. Единственото изключение - цитиран в атрибута селектор, защото По-малко вярва, че те имат една и съща стойност, и те са едни и същи.
Лазорт не играе роля. Селектори * .class и .class са еквивалентни, но няма да се простират, за да ги сравни:
Резултатът:
Редът на псевдо-класове е важно. Celektory връзка: навъртам: посетен и линк: посетена: навъртам съответстват на един и същ набор от елементи, но удължи ги вижда като различен:
Резултатът:
изразяване N-Noe
Форма N-Nogo израз не е от значение. N-Изразите 1N + 3 и N + 3 еквивалент 3ekvivalentny, но няма да ги разширяват за сравнение:
Резултатът:
въведете кавички в атрибута селектор не е важно. Всички от изброените са равностойни рекорд.
Резултатът:
"Всички" в селектори разширяването
Когато зададете ключова дума «всички»-късно в псевдо-аргумент: разшири (). - По-малко се говори за сравнение тази с селектор част на друг селектор. Селекторът се копира и да се съпоставят селектор част се сменя само от разширение, създавайки нов селектор. Например:
В резултат на това ние имаме стилове CSS:
Може да си мислите, че този вариант на работа по същество прави редовен търсене и замяна.
Интерполация селектори с селектори на разширението
Разширяване на селектори не може да се сравни с променливи селектори. Ако селектора има променлива разширение ще го игнорирате. За да направите това, има функция искане готовност, но това не е проста замяна. Въпреки това, разширението може да бъде прикрепен към интерполира за избор.
Селекторът с променливата не може да бъде сравнявано:
И разширяването на променливата в селектора мишена с нищо не е същото:
И двете от предишните примери са съставени от:
Въпреки това. удължи. прикрепен към интерполирана селектора ще работи:
Предишна МАЛКО съставен по следния CSS:
Покритие / разширение селектори в @media
Разширяване на селектори, написани на декларацията за медиите трябва да съответства селектори само в рамките на една и съща медии декларация:
Разширение селектори горната мач с всичко, включително селектори във вътрешността на вградения в медиите:
Идентификация на дубликати
Досега дубликатите не са открити. Например:
Резултатът:
Кога да използвате разширения
класически
Класическият случай на използване - за да се избегне добавянето на базовия клас. Например, ако имате
и искате да имате подтип на животно, което ще замени цвета на фона, тогава вие имате две възможности. Първият - за промяна на HTML-кодът
или създаване на опростен код и да използва разширяването в по-малко, например
Намаляване на размера на CSS
Примесите копират всички имоти в селектора, които биха могли да доведат до излишно дублиране. По този начин, можете да използвате разширения, но не и на примесите, за да преместите селектора за имотите, които искате да използвате, което ще доведе до създаването на най-CSS. Пример смес с:
Резултатът:
Пример (с селектори за разширение):
Резултатът:
Съчетавайки стил / по-напреднали примес
Друг случай употреба - алтернатива на примеси, защото примеси могат да се използват само с прости селектори, ако имате две различни HTML-блок, но трябва да се прилага по отношение на тях същия стил, можете да използвате разширението. Например:
- единство
- единство
- единство
- единство
- единство
- единство
- единство
- единство
Свързани статии