:: първи ред - CSS-трикове

Anonim

В ::first-lineпсевдо-елемент е за прилагане на стилове на първа линия на елемент. Представете си абзац с дължина няколко реда (като този!). ::first-lineви позволява да оформите първия ред текст. Можете да го използвате, за да го увеличите или да го зададете на малки капачки като стилистичен избор. Количеството текст, към който е насочен този псевдоелемент, зависи от няколко фактора, като дължина на реда, ширина на прозореца за преглед, размер на шрифта, интервал между букви, интервал между думи. Веднага след като редът се прекъсне, текстът след това вече не е избран. Имайте предвид, че тук не е избран действителен DOM елемент (по този начин „псевдо“ елемент).

Тази псевдо-елемент работи само на блокови елементи (когато displayе настроен да било block, inline-block, table-caption, table-cell). Ако е зададен върху вграден елемент, нищо не се случва, дори ако този вграден елемент има прекъсване на линия

Също така имайте предвид, че не всички свойства могат да се използват в набор от правила, съдържащ ::first-line. Предимно:

.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )

Официалната спецификация на CSS казва на потребителските агенти да позволят други свойства, ако им се иска:

UA могат да прилагат и други свойства.

Дума относно спецификата

Следващата демонстрация показва как ::first-lineе в състояние да замени всякакъв вид специфичност, дори !important.

  • Първият параграф е настроен на сиво чрез селектор на тагове
  • Вторият абзац е настроен на сиво чрез селектор на клас
  • Третият абзац е настроен на сиво чрез селектор за идентификация
  • Четвърти параграф е настроен на сиво през! Важен баш
Вижте тази писалка!

Това е така, защото псевдоелементът се третира като дъщерен елемент, а не само като част от родителския елемент. Така че правилата, които прилагате към него, са само за него, родителските правила просто могат да се каскадират към него.

Също така, опитайте да преоразмерите браузъра си, за да видите как се държи псевдоелемента при промяна на ширината на прозореца.

Няма: last-line или: nth-line, въпреки че това би било готино.

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Да Да Да 3,5+ (стари)
9+
5,5+ (стари)
9+
Да Да

Тъй като ::first-lineе псевдоелемент, той трябва да има префикс от две двоеточия, както е посочено в CSS2.1. Някои браузъри обаче поддържат само синтаксиса с едно двоеточие (Internet Explorer 5.5 - 9 и Opera 3.5 - 9).