Автор оригинала: FreeCodeCamp Community Member.
RASHEED BUSTAMAM
На днях я взял интервью у кого-то, кто завершил внешнюю сертификацию FreeCodeCamp. Он также окончил довольно престижный Bootcamp, где участники, закодированные с 8 утра до 8 вечера в течение шести недель. Ики!
Его способность программирования была великолепна, но я был удивлен, увидев, что его знания в CSS отсутствовали. И, не хватает, я имею в виду, что он не знал, как выбрать класс, чтобы применить стиль. Это не обязательно отражает негативно на него. Во всяком случае, он подчеркивает, как много программистов рассматривает CSS.
Многие люди думают, что обучение CSS неважно, поскольку дизайнеры обычно смогут реализовать для вас CSS. Хотя это правда, есть много раз, когда вы (как программист) понадобится узнать некоторые основные CSS для того, чтобы выбрать элемент и сказать ему что-то сделать, когда происходит что-то еще.
Например, Зеленая носок анимационная платформа (GSAP) Вероятно, тоже программа – Y, чтобы быть дизайнером, ориентированным. Это требует разработчика со знанием CSS, а также программирование.
Я не говорю, что каждый разработчик должен быть мастером CSS. Но я думаю, что если вы собираетесь позвонить себе разработчик полного стека, вы должны знать основы CSS. И основы начинаются с селектор Отказ
Отказ от ответственности: селекторы jQuery на самом деле не уникальны для jQuery – они на самом деле селекторы CSS. Однако, если вы что-то вроде меня, вы узнали jQuery, прежде чем вы правильно изучили CSS, и, следовательно, автоматически связанные селекторы с jQuery. Хотя эта статья о селекторах CSS, это поможет вам, если вам нужны некоторые разъяснения на селекторах jQuery.
Селектор CSS
Я всегда нахожу это полезным играть с кодом, поэтому вот простой кодепен для игры с базовыми селекторами.
В HTML есть три способа этикетки или классификации элементов. Первый путь – самый широкий: по имени метки. Например, вы можете выбрать Все Div S на вашей странице, используя простой селектор Div Отказ Эй, это было легко!
Второй способ, вероятно, тот, который вы будете использовать больше всего: Класс атрибут. Вы можете выбрать по классу, используя точку ( . ), поэтому в примере выше, выбрать Все Элементы с классом Раздел Я использую .section как селектор.
Третий способ часто переоценен, но все же полезно, и это ID атрибут. Идентификаторы должны идентифицировать ваши элементы, так как ваш SSN (в США) может идентифицировать вас как человека. Это означает, что идентификаторы должны быть уникальными по всей странице. Чтобы выбрать элемент с определенным идентификатором, вы используете хэштег ( # ), или octoToorpe Как мне нравится называть это. Чтобы выбрать элемент с идентификатором Другое Я использую # еще Отказ
Это самые основные селекторы. Чтобы пересмотреть:
- Выберите по имени ет (без префикса)
- Выберите по имени класса (префикс
.) - Выберите по ID (префикс
#)
Эти три селекторов позволят вам выбрать практически все на вашей веб-странице.
Quiz 1.
- Как бы вы выбрали все теги абзаца на странице? (Подсказка: теги абзаца являются
P) - Как бы вы выбрали все предметы с классом
Кнопка-текст? - Как бы вы выбрали элемент с идентификатором
Форма-userInput?
Не стесняйтесь поделиться своими ответами в комментариях!
Все ли удостоверение личности должны быть уникальными?
Это небольшое отступление, которое я чувствую, очень важно. Но если вы здесь, чтобы узнать, как использовать селекторы, не стесняйтесь пропустить следующий раздел
С именем, похожим на ID, вы бы предположили, что каждый HTML ID Должен Быть уникальным или ваш документ HTML не будет работать. В конце концов, пытаясь иметь два Const Переменные сделают многие редакторы leell на вас, так что бы не было бы HTML yell?
Проблема в том, что HTML будет не кричать на тебя. На самом деле, никто даже не скажет вам, что что-то не так. Вы можете найти ошибку, которая связана с неуникальным идентификатором. Но вы будете ездить с сумасшедшим, пытаясь выяснить корневую причину ошибки, потому что это очень тонкое отказ.
Пример выше демонстрирует, почему имеющие дублирующие идентификаторы могут вызвать проблему на вашей веб-странице. Во-первых, на самом деле два Div с идентификатором Другое Отказ Если вы комментируете стили для # еще , вы увидите, что оба предметы на самом деле становятся в стиле. Это может заставить вас думать: «Ну, эй, я могу использовать идентификаторы и имена взаимозаменяемо!»
Не так быстро. Если вы посмотрите на панели JavaScript, вы увидите, что выбрали определенные элементы на основе их этикетки элементов: имя тега, имя класса или ID. Вы заметите, что Документ. GtelelementsBytagname и Document.GetelementsByClassname Верните коллекцию всех соответствующих элементов HTML. Документ. GteletelementbyId Возвращает только первый HTML-элемент, который он может найти с идентификатором сопоставления. Вы можете проверить это, не сопротивляясь GetVanillaselectors функция и проверка консоли.
Для дальнейшего усложнения вещей, если вы используете JavaScript’s QuerySelectorAll Способ (который принимает селектор CSS в качестве ввода), вы получаете совершенно другой результат.
И просто связываться с вами, jQuery делает что-то другое, несмотря на то, что наличие подобного синтаксиса QuerySelectorAll Отказ
У меня нет объяснения разного поведения. Тем не менее, я могу сказать вам, как его избежать. Вот мои правила:
- Никогда не используйте идентификаторы. Использовать
Классатрибуты вместо этого. - Если мне нужно использовать идентификатор, название пространства, то это будет уникально, даже если на странице существует аналогичный товар; Например
Меню-пункт-01
Иногда формы и их входные поля, возможно, должны иметь идентификаторы. В этом случае вы можете следовать правилу номеру 2. Вот как я бы назвал пространство имен формы для регистрации пользователя:
Таким образом, если у меня есть две формы на той же странице (скажем, user-signup и user-signin ), они гарантированно имеют уникальные идентификаторы. Даже если поля UseID аналогичны между формами.
Сочетание селекторов
Иногда один селектор просто не сокращает его. Иногда вам нужно получить каждый Div у этого есть имя класса Раздел Отказ В других случаях вам нужен каждый элемент с именем класса Раздел Это дочерний элемент для Div с идентификацией Пользователь-регистрация Отказ Есть много возможных других комбинаций селектора.
В этом разделе вы узнаете три способа объединение Селекторы, и я уверен, что это подойдет 90% ваших потребностей. Если вы обнаружите, что более 11% ваших потребностей невыполнены, приходите к себе, и я отредактирую, чтобы сказать 89% ваших потребностей:).
Как и прежде, давайте начнем с кодепена:
Сочетание селекторов для одного элемента
Хорошо, сначала допустим сочетание селекторов для одного элемента. Это означает выбор элемента, имеющего имя тега х И имя класса y И идентификатор z Отказ Конечно, вам не нужно все три, но вы можете комбинировать все три.
Допустим, мы хотим выбрать все Div с классом Предмет Отказ Для этого мы объединяем два: div.item Отказ Он идет от большинства генерал, чтобы наиболее конкретно слева направо. Который выбирает все Div Теги, которые также имеют название класса Предмет Отказ Важно отметить, что есть нет пространство между Div и .item Отказ Добавление места изменяет селектор Полностью , как я пойду в следующем разделе.
Если вы беспокоите соответствующие CSS, вы увидите, что Раздел С именем класса Предмет не стал красным. Это потому, что это не Div тег.
Вы можете сделать этот же шаблон с названиями классов и идентификаторы. Но если у вас есть идентификатор элемента, вы также можете просто использовать идентификатор. Нет никаких оснований выбирать идентификатор с определенным именем класса, потому что если вы следите за правилами ID выше, у вас все равно есть один элемент с этим идентификатором.
Но только для паритета вот пример выбора Div С классом Предмет и идентификатор Другое : Div.item # Другое Отказ Опять же, идя слева направо, он идет больше всего генерала до более конкретного.
Скорее всего, вы будете использовать этот синтаксис для выбора элемента, который имеет несколько классов. Для этого просто разделите все классы с периодами. Чтобы выбрать все элементы, которые имеют оба класса Предмет и Раздел Вы бы использовали .item.section Отказ Заказ не имеет значения, когда вы делаете это таким образом, так что .section.Item Будет работать тоже.
Этот три трюк позволит вам быть более конкретным в ваших селекторах.
Селектор “ребенок”
Второй способ, которым вы можете комбинировать селекторы, используя селектор «ребенок», как мне нравится называть его. Есть два способа сделать это, поэтому я начну с самого общего.
Во-первых, вы можете выбрать любой ребенок определенного элемента, добавляя пространство. Например, чтобы выбрать все ребенка Предмет с # еще Элемент, это было бы # еще .item Отказ Обратите внимание на пространство между селекторами.
Во-вторых, вы можете выбрать непосредственный Дети определенного элемента, используя & GT; «Немедленный ребенок» элемента – это только один уровень глубокой. В этом примере есть т WO .i Элементы Tem содержатся в T Он #ot ее элемент, но один из т он .i Теминые элементы обернуты в .wrap на элемент, так что один это не ближайший ребенок.
Чтобы дать вам визуальное, если вы ругаетесь все под # еще Элемент, вы бы увидели это:
Эти два являются единственными прямые дети из # еще элемент. Выбрать только прямой ребенок .item # еще Вы бы использовали # еще> .i Тем, который бы выбрал прямой ребенок, B UT не одно мнистое Th .wrap нами. Нифты, а?
Quiz 2
- Как бы вы выбрали все теги абзаца, которые принадлежат
РазделЭлементы? (Подсказка: теги абзаца являютсяP) - Как бы вы выбрали все предметы с классом
Кнопка-текст, это потомки к предметам с классомкнопка? - Как бы вы выбрали элемент с классом
Форма вводаэто Прямой ребенокФормаЭлементы? - Бонусный вопрос : Объясните, что этот селектор выбирает:
Header.title> Кнопка FORM.USER-FAILUP.BUTTON-DANгер
Как и прежде, не стесняйтесь делиться своими ответами в комментариях!
Положить все вместе – буквально
Вы можете объединить комбинированные селекторы. Действительно. Бонусный вопрос выше, показывает пример этого, но я добавил некоторые комбинации в конце примера кодепена.
Например, вы можете выбрать все .item S, что дети Div с классом родительский элемент Используя div.parent-item .item Отказ WHOA!
Вы также можете выбрать прямые потомки. Например, выбрать все Div с классом Предмет Это прямые потомки до Div с классом родительский элемент : div.parent-item> div.i навес
И, наконец, просто связываться с вами, вы можете идти по всему дереву DOM: div.parent-item .coolest-item .item Отказ Предмет класс, который – это ребенок для Чистый элемент класс, который – это ребенок для Div С классом родительский элемент Отказ
Обратите внимание, что это вообще не Хорошая идея выходить за пределы двух или трех уровней глубины при вложении селекторов. Затем вы попадаете в странные сферы специфичности, которые вы можете более эффективно решить, назвав ваши классы CSS лучше. Но это выходит из объема этой статьи. Если вы хотите узнать больше, дайте мне знать, и я напишу об этом.
Бонус: используя Chrome devtools, чтобы получить селектор
Вы можете использовать Chrome devtools, чтобы получить селектор любого элемента, который вы можете выбрать на DOM. Вот как:
- Откройте Chrome devtools. Поскольку вы выбираете элемент, продолжайте и щелкните правой кнопкой мыши элемент, который вы хотите выбрать, и нажмите «Осмотреть»:
2. Щелкните правой кнопкой мыши элемент DOM, который вы хотите выбрать, и нажмите «Копировать», затем нажмите «Селектор копирования:»
3. Вот и все! Селектор, который я скопировал, кстати, это # Editor_93> Раздел> div.section-content> div: nth-child (3)> p.graf.graf - p.graf-после - pight.graf - Трейлинг . – выбрано. Вы можете скопировать SE лектор в документ .Q Ueryselector или jQuery и получите элемент.
Надеюсь, эта перезапись была полезна! Если вам понравилось, пожалуйста, дайте мне несколько хлопья, чтобы все больше людей видят это. Спасибо!