Привет, сегодня мы будем говорить о продвинутых селекторах.
До этого момента, когда мы писали наши правила,
мы писали наши правила для определенного типа тега.
Мы говорили «h1», «p» или «h2».
Так что мы просто сосредоточились на одной вещи, которая охватывает все различные элементы
этого типа.
Но что, если вы не хотите стилизовать все ссылки, только некоторые из них?
Или вы не хотите стилизовать все свои списки,
вы просто хотите стиль некоторых из них?
Ну, теперь мы поговорим об этих передовых селекторах
, которые позволят нам сделать именно это.
CSS собирается дать вам так много вариантов, что в этой лекции я собираюсь попытаться
охватить столько, сколько я могу, но это все равно будет до вас, чтобы уйти и
посмотреть еще несколько самостоятельно, как вы нуждаетесь в них.
Итак, давайте начнем с селекторов CSS, которые следуют DOM.
Если вы помните, что объектная модель документа
заключается в том, как браузер разбивает вашу страницу на древовидную структуру.
Таким образом, браузер фактически знает, приходит ли абзац непосредственно после
тега h1 или если два абзаца являются братьями и сестрами в одном разделе.
Мы будем использовать это для стилизации только определенных частей вашей страницы.
Таким образом, селекторы потомков - это способ сказать: эй, если вы находитесь внутри тега навигации,
я хочу, чтобы вы стиль всех ссылок, которые находятся внутри тега навигации.
Вместо того, чтобы делать все, только те.
Если вы хотите быть еще более конкретным, вы можете использовать дочерние селекторы.
Это правило очень похожее, за исключением того, что говорится, что
все ссылки должны быть тем, что мы называем прямыми потомками навигационной ссылки.
Если у вас есть абзац, и у вас есть некоторые ссылки, игнорируйте это.
Они должны быть прямо под друг другом.
Последний из них - соседний брат.
Это не тот, который я действительно использую в своем собственном кодировании, но
я хотел сообщить вам, что это такое, потому что есть действительно хороший шанс, что
вы увидите его, если вы смотрите на код других людей.
Как работает соседний брат, так это то, что элементы должны быть тем,
что мы называем одним и тем же уровнем и следовать друг за другом.
Поэтому, если у вас есть раздел, который имеет h1, а
затем упорядоченный список, они будут братьями и сестрами.
Если бы у вас был h1, а затем некоторые другие вещи
, и этот упорядоченный список был внутри абзаца, это не сработало бы так.
Далее мы поговорим о том, что мы называем селекторами идентификаторов.
идентификаторы используются для идентификации одного элемента в DOM.
Способ работы идентификаторов заключается в том, что
вы войдете, и вы бы, в своем HTML, сказали что-то по строкам заголовка id равно, или
id равно нижнему колонтитулу, который они использовали много.
Затем в таблице стилей, используя символ фунта,
вы можете определить, какие из них вы хотите стиль.
Итак, прямо сейчас есть небольшое движение, но
оно немного растет, чтобы выйти из использования id из CSS.
Они говорят, что на самом деле нет смысла использовать это, потому что многие
люди просто действительно используют этот идентификатор для JavaScript и тому подобное.
Но опять же, это то, что ты увидишь много, так что
я хочу познакомить тебя с этим.
Итак, давайте посмотрим пример очень быстро здесь только на экране того, как это работает.
В моем HTML я бы пошел вперед и поместил свой источник, мой alt тег,
но также ID = «mainLogo».
Затем, в моей таблице стилей, используя символ # вместе с именем идентификатора,
браузер будет знать, о, всякий раз, когда я вижу одно из этих изображений,
я хочу убедиться, что я добавлю эту границу и это поле.
Селекторы классов похожи на идентификаторы, но разница в том, что классы могут
применяться к диапазону элементов, а не только к одному конкретному элементу в DOM.
Итак, подумайте о миниатюрах изображений или социальных значках СМИ.
Это идея, которая, знаешь что,
я хочу иметь возможность стилизовать большую группу вещей таким же образом,
но я не хочу всегда стилизовать их все таким образом.
Вы не хотите, чтобы все изображения были миниатюрами,
но вы хотите, чтобы многие из них были.
Вы бы написали этот код очень похожим образом.
Здесь, в моем HTML, у меня есть класс = «большой палец», класс = «большой палец»,
класс = «большой палец».
И в моем CSS вместо использования # вам нужно убедиться, что вы используете
точку или точку вместе с именем класса, а затем вы можете дать ему любые правила.
И таким образом, страница будет проходить и знать, что в дополнение к
любому стилю, который вы только что положили на изображения, вы также хотите этот стиль для эскизов.
Поэтому просто чтобы попытаться помочь вам сделать это немного более понятным,
в чем разница между использованием классов и идентификаторов?
Во-первых, ты хочешь убедиться, что знаешь синтаксис.
Период предназначен для классов, а фунт - для идентификаторов.
Вы не можете испортить это, потому что браузер не исправит это для
вас, если вы поставите неправильную вещь перед своим именем класса или идентификатора.
Вы хотите помнить, что классы можно использовать несколько раз.
В вашем HTML-коде имеет смысл видеть класс = «большой палец», класс = «большой палец»,
класс = «большой палец», потому что он не должен быть определенной частью страницы.
С идентификаторами он должен быть уникальным, вы должны видеть только id равен,
например, заголовку, который мы даже не используем один раз.
Вы должны увидеть только идентификатор = «главный раздел» один раз.
Итак, давайте подумаем об изображениях и навигационных панелях.
Это очень распространено, что вы хотите форматировать многочисленные, но
не все изображения одинаково.
И вы бы использовали классы для этого.
Где вы можете использовать идентификатор, я уверен, что вы были в некоторых местах, где на
веб-странице вы видите панель навигации, а
страница, на которой вы находитесь в настоящее время, стилизована немного по-другому.
И это имеет смысл, потому что вы можете быть только на одной странице за раз, и
именно поэтому вы можете выбрать идентификатор,
так что давайте продолжим и рассмотрим быстрый пример с помощью этой навигационной панели.
Итак, вот пример HTML-файла,
где все, что я сделал, это поместить в четыре ссылки, которые даже никуда не идут.
Я прокомментировал таблицу стилей, чтобы
вы могли увидеть, как это будет выглядеть без какого-либо стиля.
Вы можете видеть, у меня есть свой дом, интересы, резюме, хобби, и
у меня есть одна дополнительная ссылка здесь, которую я очень плохо назвал здесь.
Итак, давайте продолжим и
попробуем добавить немного стиля, используя эти продвинутые селекторы.
Иди сюда.
Вы можете видеть, что я использовал дочерний элемент, на самом деле,
просто своего рода потомка, эй, все ссылки, которые находятся в панели навигации,
я хочу по-другому стиль, я хочу дать им другой цвет фона,
разную ширину, такие вещи.
Кроме того, все, что является текущим классом, я хочу сделать даже другим,
чем любая другая ссылка или что-то еще, что мы видели таким образом.
Так что давайте продолжим и раскомментируем таблицу стилей.
Сохраните его.
Переходите от этого к этому.
Вы можете видеть, что стилизованы только ссылки, которые находятся внутри моей навигационной панели.
Эта была оставлена прежней.
И тот, где у меня есть класс = «текущий», выглядит иначе от других.
Так что это очень просто использовать эти вещи, вам просто нужно знать о них.
По мере того, как ваши страницы становятся более продвинутыми,
вы хотите сузить сферу применения некоторых правил.
Мы хотим применить их только к определенным вещам.
И одним из обозначений, которые вы можете использовать для этого, является точка.
Таким образом, в вашей таблице стилей у вас будет p.main.
Это означает, что идите и найдите все абзацы, которые используют основной класс.
Или у вас может быть заголовок img.special.
Это означало бы найти все изображения, которые имеют классическое изображение специального
, которые принадлежат в заголовке.
Это просто способ для вас действительно уменьшить то, что стилизовано.
С одной стороны, вы также можете, что мы называем, расширить область действия.
Итак, предположим, что есть какой-то стиль, который вы хотите применить как к
заголовку, так и к нижнему колонтитулу, или к разделам и статьям.
Не проблема.
То, что вы делаете, это просто пишете элемент,
и вы включаете запятую прямо там, чтобы сообщить ему.
Так же, как быстрый обзор.
И это что-то из гораздо раньше.
Вам нужно подумать о том, что происходит, когда существует несколько правил для
одного и того же селектора.
Таким образом, у вас может быть это здесь с абзацем, где он имеет определенные
качества, которые он хочет разделить между пунктами h1, id main и
классом special.
Но позже, если вы хотите иметь дополнительный стиль для
абзаца, если вы помещаете это где-то ниже,
он будет переопределять и комбинироваться со всем, что выше.
Поэтому, если правило не имеет важного восклицательного знака после него, оно всегда
просто использует последний, который он видел, наряду с более ранними, которые не конфликтуют.
В дополнение к селекторам элементов и различным селекторам отношений DOM, у
нас также есть несколько других, о которых я хочу кратко поговорить.
Первый - универсальный селектор, который является звездой или
Shift 8 на клавиатуре.
Что это делает,
он применит ваш стиль к каждому отдельному элементу на странице.
Это абсолютно безумие.
Я не собираюсь этого делать.
Я позволю тебе сделать это, но вперёд и поставь звезду, а затем стиль,
возможно, граница, вокруг каждого элемента.
Это влияет на все на вашей странице.
Иногда это приятно для отладки.
Следующий, о котором вы, возможно, захотите подумать, - это то, что мы называем
селекторами атрибутов.
Вместо того, чтобы идти на теги, вы идете на атрибуты, которые входят внутри тегов.
Поэтому в этом случае он будет идти вперед, и он хотел бы стилизовать каждую ссылку, где
у вас есть href = «info.html», и я сделаю быстрый пример этого всего за секунду.
Но прежде чем я это сделаю, я хотел упомянуть еще два, на которые мы будем смотреть позже,
которые являются псевдо-классами и псевдоэлементами.
Просто еще один уровень отличия только определенных вещей, которые вы хотите стилизовать
на своей странице.
Но сначала давайте продолжим и посмотрим на использование этих селекторов атрибутов.
Таким образом, способ работы селекторов атрибутов заключается в том, что они ищут DOM для
элементов, которые имеют атрибут, который вы ищете.
Так, например, вы можете посмотреть все изображения, которые используют файлы gif или
все изображения, которые имеют пустой текст alt или, может быть,
все ссылки, которые идут на государственные сайты или некоммерческие сайты или образовательные сайты.
Нам очень легко найти их и идти вперед и
стиль их немного по-другому.
Как мы это делаем, мы используем операторы, чтобы
соответствовать различным частям текста alt, который вы ищете.
Так что здесь, в том, что мы называем кареткой, она будет соответствовать началу.
Поэтому в этом случае он будет соответствовать всем тем ссылкам, которые начинаются с http://umich, и
неважно, как это заканчивается.
Следующий со знаком доллара будет точно совпадать с концом.
Он собирается найти каждый файл, который заканчивается на .png.
У нас также есть подстановочный знак, куда вы идете и
говорите, если вы видите umich в любой части любой гиперссылки вообще, примените это правило.
Итак, что мы собираемся посмотреть на файл, который имеет разные
ссылки, и у каждого из них есть разный тип расширения, который мы хотим стилизовать по-разному.
Ладно.
Итак, что у меня есть здесь, это просто список ссылок.
Здесь нет занятий.
Ничего особенного в этом, что относится к разным университетским сайтам, организациям
, правительственным сайтам, и если вы посмотрите, по умолчанию, это просто появится как
ваши традиционные синие ссылки с подчеркиванием, текст прямо там.
Но что я хочу сделать, так это я хочу войти и сказать,
знаете что, все те, которые заканчиваются на .org?
Сделай их одним цветом.
Все те, которые являются .edu, другой цвет, и
все те, которые заканчиваются в .gov, третий цвет.
Посмотрим, как это выглядит.
Здесь вы можете видеть, что без необходимости вкладывать какую-либо информацию внутри
самих тегов, браузер раскрасил их соответствующим цветом.
Ладно, я только что осветил много вещей в очень коротком видео.
Ты должен понять, что эти идеи сливаются вместе.
Вы будете использовать классы,
вы будете использовать идентификаторы, вы будете использовать атрибуты.
И главное, что я хочу, чтобы вы знали, это то, что когда
вы добавляете все эти вещи вместе, порядок, в котором вы пишете классы и
разные идентификаторы в своем тексте, не имеет значения.
Неважно, есть ли у вас специальные ранние темные или темные ранние специальные.
Что действительно важно, так это порядок, который вы пишете свои правила в своей таблице стилей.
Браузеры всегда будут начинаться вверху и применять каждое правило.
Теперь хорошая новость из этой лекции заключается в том, что я хочу, чтобы вы поняли,
что с силой классов и идентификаторов и этой каскадной таблицы стилей является
то, что это означает, что вы можете использовать таблицы стилей от других людей для стилизации вашего кода.
И вы можете просто добавить класс, который изменяет один маленький атрибут
, который, возможно, вам не понравился.
Вы можете переопределить эти таблицы стилей и сделать их собственными.
Просто убедитесь, что вы связываете свою таблицу стилей последним.
Ладно, мы много накрыли, и
я надеюсь, что я не ошеломил тебя видео.
Я просто хочу, чтобы вы помнили, что когда мы делаем селекторы типов, и
то, что я собираюсь заставить вас сделать в этом классе, это то, что
мы обычно добавляем их, чтобы сузить область применения правил.
Так что мы не хотим стилизовать все.
Мы только хотим стилизовать определенные вещи.
Идентификатор используется для указания конкретного элемента на странице, и
классы используются для связывания элементов, которые действительно имеют тенденцию иметь аналогичный вид.
Так что, пока мы продолжим, я знаю, что у меня будет несколько примеров кода со мной.
Я надеюсь, что вы остановитесь, достанете свой ноутбук и
получите код со мной, чтобы понять, насколько мощными могут быть эти разные вещи.
Спасибо.