SitePoint помогает веб-разработчикам лучше выполнять свою работу, независимо от того, являются ли они специализированными программистами, универсальными программистами, разработчиками ориентированных на дизайн интерфейсов или любыми другими разработчиками. Мы делаем это, предоставляя сетевые ресурсы, которые исследуют и объясняют новые и существующие технологии и дисциплины посредством статей, учебных пособий, обзоров, новостей и комментариев.
Наши партнеры в Learnable разделяют эту цель и предлагают подробные видеоуроки, книги, курсы и видеоролики JumpCast, которые дополняют ресурсы SitePoint. Большинство видео JumpCast, которые мы представили вашему вниманию, были интервью с профессионалами отрасли, обсуждающими их опыт работы с определенным плагином, фреймворком или инструментом какого-либо рода.
Тем не менее, библиотека JumpCast также имеет впечатляющий набор коротких практических видеоуроков по аспектам работы с CSS. Мы собираемся представить вам некоторые из них, начиная с этого пятиминутного руководства по новому структурному псевдоклассу CSS3 nth-of-type.
CSS: NTH селектор
Чтобы узнать больше о подобных видео JumpCast, посетите Learnable
транскрипция
G’day. Сегодня мы поговорим о новом селекторе CSS3 под названием nth-of-type. Теперь это один из новых структурных псевдоклассов. Итак, давайте посмотрим на его синтаксис и как мы можем его использовать.
Итак, прежде всего, давайте пойдем и посмотрим на наш документ. Здесь у нас есть неупорядоченный список, а внутри неупорядоченного списка у нас есть восемь элементов списка. Теперь, если бы мы поднялись и написали простой селектор, мы могли бы написать что-то вроде li и сделать так, чтобы у каждого li был красный фон. Если мы посмотрим на это в браузере, вы увидите, что каждый элемент списка имеет красный фон. Но то, что позволяет нам делать селектор n-го типа, — это определять конкретные экземпляры этого li. Мы начнем с ввода чего-то вроде: nth-of-type и затем скобок. Так вот как это написано. Мы пишем его с элементом впереди, а затем с n-ным типом и скобками. В этом случае я собираюсь использовать li.
Сейчас много путаницы в том, как это на самом деле работает. Мы на самом деле стилизуем nth-of-of-the li. Мы не стайлинг внутри ли. Так что, если мы сделаем что-то вроде трех, это будет третий случай li. Теперь, внутри скобок, мы можем поместить несколько вещей, и самые простые, которые мы можем поместить, это просто целочисленное значение. Итак, я собираюсь поставить «3». Так что на самом деле это то, что мы собираемся сделать стиль, но только третий в своем роде. Если мы пойдем сюда, это один, два, три. Итак, теперь третий пункт списка должен быть единственным красным. Это третий в своем роде.
На самом деле мы можем сделать его более точным, используя число или целочисленное значение и букву «n». Это на самом деле изменит способ работы этого правила, потому что теперь он ищет каждое третье число. Таким образом, вместо того, чтобы просто искать третий li, он ищет третий, шестой, девятый и т. Д. Так что он ищет любой li, который является третьим числом. Поэтому, если мы пойдем и посмотрим, вы внезапно увидите, что он идет один, два, три, четыре, пять, шесть, и если бы у нас был девятый, он бы это тоже сделал. Таким образом, это позволяет нам делать это более определенным образом.
Следующий способ, который мы можем использовать, это добавить к этому. Таким образом, первым способом было просто число или целое число. Следующий путь был с целым числом и буквой «n», а третий — использовать плюс или минус. Теперь мы будем использовать плюс в первую очередь. Теперь, что это собирается сказать, это каждый третий экземпляр плюс один. Теперь, перед перезагрузкой, я собираюсь выйти сюда, и это так, как это было секунду назад, так что это каждый третий случай. Итак, мы бьем один, два, три, четыре, пять, шесть, семь, восемь, девять. Теперь, если вы сделаете плюс один, это на самом деле будет двигаться вниз на один. Так что на самом деле это будет один, два, три, четыре, пять, шесть, семь, восемь, девять, десять, и все будет в стиле один. Так что, если я перезагружу страницу, вы увидите, что все они опустятся на один. Так что это использует значение 3n + 1.
Теперь, если мы будем использовать минус … Ну, на самом деле, я вернусь к 3n на секунду. Перезагрузить там. Итак, мы вернулись только на 3n, так что это один, два, три, четыре, пять, шесть, семь, восемь, девять. Но если мы сделаем минус один, он на самом деле будет расти. Итак, теперь он идет один, два, три, четыре, пять, шесть, семь, восемь, поэтому он движется назад на один.
Мы также можем написать простое ключевое слово внутри. Мы могли бы использовать «даже», и это позволит нам стилизовать каждый четный экземпляр li. Теперь это отличная вещь для разметки таблиц, потому что вы можете использовать это для чего-то вроде tr и устанавливать каждую строку без использования JavaScript. Вы также можете использовать ключевое слово «нечетный», и это будет наоборот. Теперь, как ни странно, ключевое слово «четный» точно такое же, как если бы вы написали 2n. Если мы пойдем и посмотрим на это, вы увидите, что это так же, как даже. Если вы хотите написать «нечетное», это то же самое, что написать 2n-1. Итак, вот оно, невероятно простая небольшая демонстрация селектора n-го типа.