что означает в css знак
Что означает селектор CSS » + » (знак плюс)?
11 ответов
этот селектор означает, что стиль применяется только к абзацам непосредственно после очередного абзаца.
Равнина p selector применит стиль к каждому абзацу на странице.
посмотреть селекторы ВКЛ W3.org.
это будет работать только на IE7 или выше. В IE6 стиль не будет применяться ни к каким элементам. Это также относится к > комбинатора, кстати.
это соседний селектор братьев и сестер.
чтобы определить смежный селектор CSS, используется знак плюс.
вышеуказанный код CSS будет форматировать первый абзац после (не внутри) любых заголовков h1 как синий.
h1>p выбирает p элемент, который является прямым (первого поколения) ребенка (внутри) в h1 элемент.
h1+p выберите первый p элемент, который является братом (на том же уровне dom), что и h1 элемент.
на + знак означает выберите adjacent sibling
в CSS
HTML-код
стиль будет применяться со второго
пример
Поддержка Браузеров
селекторы смежного брата поддерживаются в Internet Explorer 5.x Macintosh. Они также поддерживаются в Netscape 6 preview release 1 для всех бесчисленных платформ, для которых он доступен, и в preview release 3 Opera 4 для Windows. В IE5 для Windows и Opera 3 для Windows есть ошибки в обработке селекторов соседних братьев.
хорошо знаю: Internet Explorer 7 неправильно обновляет стиль, когда элемент динамически помещается перед элементом, который соответствует селектору. В Internet Explorer 8, если элемент вставляется динамически, нажав на ссылку, первый дочерний стиль не применяется, пока ссылка не потеряет фокус.
узнать больше
«+» является смежным селектором братьев. Он будет выбирать любой p непосредственно после p (не ребенок или родитель, хотя, брат).
например, селектор p + p выбирает p элементы сразу после p элементов
это можно рассматривать как looking outside селектор, который проверяет наличие следующего элемента.
вот пример фрагмента, чтобы сделать вещи более ясными:
так как мы одно и то же тема, стоит упомянуть еще один селектор,
выбор General Sibling Selector
вот как это выглядит с той же разметки:
обратите внимание, что последний p также соответствует в этом образце.
Он будет соответствовать любому элементу p Это непосредственно примыкает к элементу ‘p’. Смотри:http://www.w3.org/TR/CSS2/selector.html
Он выбирает следующий абзац и отступы в начале абзаца слева так же, как вы могли бы в Microsoft Word.
+ представляет один из относительных селекторов. Список всех относительных селекторов:
элементы, прямой родитель
элементы сразу после
элементы, которым предшествует a
подробнее о проверке селекторов здесь.
плюс ( + ) выберет первый непосредственный элемент. При использовании + selector необходимо указать два параметра. Это будет более ясно на примере: здесь div и span являются параметрами, поэтому в этом случае будет стилизован только первый span после div.
выше стиль будет применяться только к первому промежутку после div. Важно отметить, что второй диапазон не будет выбран.
конечный результат выглядит следующим образом
это означает, что он соответствует каждому p элемент, который непосредственно примыкает
Что означает селектор CSS «>» (знак «больше»)?
8 ответов
Иллюстрация, сравнивающая дочерний комбинатор с потомком комбинатора:
Какие элементы соответствуют каким селекторам?
1 Многие люди идут дальше, называя его «прямым потомком» или «непосредственным потомком», но это совершенно не нужно (и меня невероятно раздражает), потому что дочерний элемент является непосредственным по определению , так что они означают одно и то же. Не существует такого понятия, как «косвенный потомок».
Селектор CSS может содержать более одного простого селектора. Между простыми селекторами мы можем включить комбинатор.
В CSS3 есть четыре разных комбинатора:
Примечание. недопустим в селекторах CSS.
Например:
Вывод:
Как упоминают другие, это дочерний селектор. Вот соответствующая ссылка.
(дочерний селектор) был введен в css2. div p <> выбирает все элементы p, являющиеся потомками элементов div, тогда как div> p выбирает только дочерние элементы p, а не большие дочерние элементы, великие дочерние элементы и т. д.
Для получения дополнительной информации о CSS Ce [лекторах и их использовании, посетите мой блог, css-селекторы и селекторы css3
Все прямые дочерние элементы, которые являются
Селектор со знаком «больше» (>) в CSS означает, что селектор справа является прямым потомком / потомком того, что находится слева.
Означает только стиль абзаца, который идет после статьи.
30 селекторов CSS, которые нужно запомнить
Дата публикации: 2010-12-11
От автора: Итак, вы выучили основные селекторы css: id, class, наследование – и довольны? Если да, то вы упускаете гигантский объем гибкости. Хотя многие селекторы, упомянутые в этой статье, являются частью спецификации CSS3 и, следовательно, имеются в наличие только на современных браузерах, вы должны их запомнить.
Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.
Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Звездочку * также можно использовать для дочерних селекторов.
Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.
Совместимость
Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.
Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?
Селекторы id неподатливы и не позволяют повторного использования. Если возможно, сначала попробуйте использовать имя тэга, один из новых элементов HTML5, или даже псевдокласс.
Совместимость
Это — селектор class. Разница между id и class’ами в том, что при помощи последнего вы можете выбирать множественные элементы. Используйте class’ы, когда хотите применить стили к группе элементов. В качестве альтернативы используйте id для нахождения иголки в стогу сена и примените стиль к одному отдельному элементу.
Совместимость
4. X Y
Следующий наиболее комментируемый селектор — потомок. Пользуйтесь им, когда к своим селекторам нужно отнестись более конкретно. Например, что делать, если нежели выбирать все тэги-привязки all, лучше было бы сделать своей целью привязки внутри неупорядоченного списка? Вот когда вы определенно воспользовались бы наследованием селекторов.
Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.
Совместимость
Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul <>.
Совместимость
6. X:visited and X:link
Для выборки всех тэгов-привязок, на которые еще нужно щелкнуть, мы пользуемся псевдоклассом :link.
Как альтернатива, у нас имеется псевдокласс :visited, который, как подразумевается, позволяет нам применять специальные стили только к тэгам-привязкам на странице, по которой уже щелкнули, или которую посетили.
Совместимость
7. X + Y
Эта запись указывает на смежный селектор. Будет отбираться только тот элемент, которому непосредственно предшествует шаблонный элемент. В данном случае первый абзац после каждого элемента ul будет иметь текст красного цвета.
Совместимость
Разница между обычным X Y и X > Y состоит в том, что последний выберет только прямые дочерние элементы. Например, рассмотрите следующую разметку.
Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.
По этой причине преимущества производительности имеются в использовании дочернего комбинатора. Собственно, он чрезвычайно рекомендуется при работе с движками селекторов CSS, основанных на JavaScript.
Совместимость
Этот комбинатор находит одноуровневые узлы и идентичен X + Y, однако он менее строгий. В то время как смежный селектор (ul + p) выберет только первый элемент, которому непосредственно предшествует шаблонный элемент, этот селектор более общий. В вышеприведенном примере, он будет выбирать любые элементы p до тех пор, пока они следуют за ul.
Совместимость
10. X[title]
Совместимость
11. X[href=»foo»]
Вышеприведенный фрагмент определит стили всем тэгам-привязкам, которые ссылаются на //net.tutsplus.com; они получат наш фирменный зеленый цвет. Все прочие тэги-привязки останутся нетронутыми.
Обратите внимание, что мы заключаем значение в кавычки. Помните, что это также нужно делать при использовании движка селекторов JavaScript CSS. Предпочтительно перед неофициальными методами, всегда пользуйтесь селекторами CSS3, когда возможно.
Работает хорошо, только слегка негибко. Что получится, если ссылка действительно направляет на Nettuts+, но, возможно, путь – это nettuts.com, а не полный url? В таких случаях можно использовать чуть-чуть нормального синтаксиса выражений.
Совместимость
12. X[href*=»nettuts»]
Вот сюда мы шли; вот то, что нам нужно. Звездочка обозначает, что действующее значение должно появиться где-то в значении атрибута. Таким образом покрывается nettuts.com, net.tutsplus.com, и даже tutsplus.com.
Помните, что это обширное утверждение. Что выйдет, если тэг-привязка соединяет с каким-то сайтом, расположенным не на Envato, со строкой tuts в url’е? Если нужно более точно определить, используйте ^ и & для ссылки соответственно на начало и конец строки.
Совместимость
13. X[href^=»http»]
Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.
Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.
Обратите внимание, что мы не ищем //; он не нужен и не несет ответственности за url’ы, начинающиеся с //.
Теперь, если бы нам было нужно вместо этого определить стиль всем привязкам, которые ссылаются на, скажем, фотографию? В этом случае давайте поищем конец строки.
Совместимость
14. X[href$=».jpg»]
Совместимость
15. X[data-*=»foo»]
Вернитесь к номеру восемь; как можно скорректировать все эти разные типы изображений: png, jpeg,jpg, gif? Ну, мы могли бы создать множественные селекторы, такие как:
Но так мы создаем себе головную боль и, к тому же, это неэффективно. Другое возможное решение – применение пользовательских атрибутов. Что получится, если добавить свой собственный атрибут data-filetype к каждой привязке, ссылающейся на изображение?
Затем, при помощи этого готового к работе приема, можно употребить стандартный селектор атрибутов для выделения исключительно нужных привязок.
Совместимость
16. X[foo
А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (
) позволяет выбрать своей целью атрибут со списком значений, разделенным пробелами.
Согласно вышеприведенному пользовательском атрибуту из номера пятнадцать мы могли бы создать атрибут data-info, который может получить разделенный пробелами список чего угодно, что нужно пометить. В этом случае мы отметим внешние ссылки и ссылки на изображения — просто для примера.
При помощи готовой к работе разметки мы теперь можем выбрать любые тэги с любыми из этих значений, используя прием селектора атрибутов
Совместимость
17. X:checked
Этот псевдокласс выберет только проверенный элемент пользовательского интерфейса – как кнопка радио или checkbox (прямоугольник для пометки выбранного режима, состояния или действия (на экране дисплея)). Просто, как дважды два.
Совместимость
18. X:after
Псевдоэлементы before и after соединяют все. Кажется, каждый день находятся новые творческие приемы их эффективного использования. Они просто формируют содержимое вокруг выбранного элемента.
Многие познакомились с этими классами при первой встрече с хаком clear-fix.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Этот хак использует псевдоэлемент :after для присоединения пробела после элемента, а затем его очистки. Этот великолепный прием стоит иметь в своем инструментарии, особенно в тех случаях, когда невозможно использовать метод overflow: hidden;.
Совместимость
19. X:hover
Ой, да ладно! Этот вы знаете. Официальный термин для него: user action pseudo class (псевдокласс пользовательского действия). Название сбивает с толку, но на деле он не такой. Хотите, когда пользователь проводит мышью над элементом, применить специальные стили? Он выполнит эту работу!
Помните, что более старая версия Internet Explorer не отвечает на применение псевдокласса :hover к чему-либо, кроме тэга-ссылки.
Профессиональная подсказка — border-bottom: 1px solid black; смотрится лучше, чем text-decoration: underline;.
Совместимость
20. X:not(selector)
Псевдокласс отрицания чрезвычайно полезен. Скажем, я хочу выбрать все div’ы, кроме одного, который является id container. Фрагмент выше выполнит эту работу идеально.
Или, если бы я хотел выбрать каждый отдельный элемент (не советую), кроме тэгов абзаца, можно было бы сделать:
Совместимость
21. X::pseudoElement
Можно использовать псевдоэлементы (назначенные ::) для назначения стилей фрагментам элемента, таким, как первая строка или первая буква. Помните о том, что для того, чтобы оказать эффект, они должны быть применены для блочных элементов.
Псевдоэлемент состоит из двух двоеточий: ::
Выберите первую букву абзаца
Этот отрывок – выделение, которое найдет все абзацы на странице, а затем довыберет только первую букву этого элемента.
Чаще всего оно используется для создания «газетных» стилей для первой буквы абзаца.
Подобным образом псевдоэлемент ::first-line, как от него и ожидается, назначит стили только первой строке элемента.
«Для совместимости с существующими таблицами стилей агенты пользователя также должны принимать нотацию (систему обозначений) одного предыдущего двоеточия для псевдоэлементов, представленных в уровнях 1 и 2 CSS (а именно: :first-line, :first-letter, :before и :after). Эта совместимость не предоставляется новым псевдоэлементам, представленным в этой спецификации» — источник
Совместимость
22. X:nth-child(n)
Помните время, когда у нас не имелось возможности выделять отдельные элементы в стеке? Псевдокласс nth-child решает эту проблему!
Пожалуйста, обратите внимание, что nth-child принимает в качестве параметра целое число, однако, оно не начинается с нуля. Если хотите выбрать второй пункт списка, пользуйтесь li:nth-child(2).
Можно даже употребить его, чтобы выбрать совокупность дочерних переменных. Например, мы могли бы сделать li:nth-child(4n) для выделения каждого четвертого пункта списка.
Совместимость
23. X:nth-last-child(n)
Что получится, если бы у вас был огромный список пунктов в ul, и вам нужно было всего лишь обратиться, скажем, к третьему от конца пункту? Помимо выполнения li:nth-child(397), вы могли бы вместо этого применить псевдокласс nth-last-child.
Эта техника работает почти так же, как вышеуказанный номер шестнадцать, тем не менее, разница состоит в том, что она начинается с конца совокупности и работает в обратную сторону.
Совместимость
24. X:nth-of-type(n)
Временами вместо выбора дочернего элемента (child), вам понадобится выбрать согласно типу (type) элемента.
Представьте себе разметку, содержащую пять неупорядоченных списков. Если бы вы хотели присвоить стили только третьему ul’у и не имели уникального id для привязки, то могли бы использовать псевдокласс nth-of-type(n). Иметь вокруг себя рамку в верхнем фрагменте будет только третий ul.
Совместимость
25. X:nth-last-of-type(n)
Да, оставаясь до конца логичными, мы еще можем применить nth-last-of-type для того, чтобы начать с конца списка селекторов и продвигаться в обратную сторону для выборки нужного элемента.
Совместимость
26. X:first-child
Этот структурный псевдокласс позволяет нам выбрать только первый дочерний элемент своего родителя. Вы его будете часто использовать для удаления рамок с первого и последнего пунктов списка.
Например, скажем, у вас есть список строк, и каждый из них содержит border-top и border-bottom. При таком размещении первый и последний пункт в этом наборе будут выглядеть немного странно.
Для корректировки этого многие дизайнеры применяют классы first и last. Вместо них можно использовать эти псевдоклассы.
Совместимость
27. X:last-child
В противоположность first-child, last-child выделит последний пункт родителя элемента.
Пример
Давайте построим простой пример для демонстрации одного из возможных способов использования этих классов. Создадим элемент списка, имеющий стили.
Разметка
Здесь нет ничего особенного; всего лишь простой список.
Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.
Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.
Как видно на изображении вверху, единственная проблема состоит в том, что рамка будет применяться к самому верху и низу неупорядоченного списка – это выглядит странно. Давайте для устранения этой проблемы используем псевдоклассы :first-child и :last-child.
Вот так; все исправлено!
Совместимость
28. X:only-child
Честно говоря, вы, вероятно, не слишком часто застанете себя за использованием псевдокласса only-child. Несмотря на все, если он понадобится, то вполне доступен.
Он позволяет выбирать элементы, являющиеся единственным дочерним у родителя. Например, касаемо фрагмента вверху, красным цветом будет окрашен только абзац, который является единственным дочерним элементом div’а.
Давайте представим следующую разметку.
Two paragraphs total.
Two paragraphs total.
В этом случае вторые абзацы div’а не будут выбраны; только первый div. Как только вы примените более одного дочернего элемента, псевдокласс only-child перестанет иметь эффект.
Совместимость
29. X:only-of-type
Этот структурный псевдокласс может использоваться несколькими хитрыми способами. Он выберет элементы, не имеющие сиблингов (элементов одного уровня) в своем родительском контейнере. В качестве примера давайте выберем все ul’ы, имеющие всего один пункт списка.
Во-первых, задайте себе вопрос, каким образом вы выполнили бы это задание? Вы могли бы сделать ul li, но так они выберут своей целью все пункты списка. Единственное решение – использовать only-of-type.
Совместимость
30. X:first-of-type
Псевдокласс first-of-type позволяет выбирать первые сиблинги (элементы одного уровня) своего типа.
Проверка
Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:
Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.
Решение 1
Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.
Этот отрывок, по сути, говорит: «Найдите первый неупорядоченный список на странице, затем найдите только прямые дочерние элементы, являющиеся пунктами списка. Далее отфильтруйте все до второго пункта списка в наборе».
Решение 2
Второй возможный вариант будет использовать смежный селектор.
В этом сценарии мы находим ul, непосредственно следующий за тэгом p, а затем найдем самый последний его дочерний элемент.
Решение 3
Можно вредить им или играть с этими селекторами, как угодно.
На этот раз мы берем первый ul на странице, затем находим самый первый пункт списка, но начинаем с конца!
Совместимость
Заключение
Если вы корректируете более старые браузеры, типа Internet Explorer 6, вам все же следует быть осторожным при использовании новых селекторов. Но, пожалуйста, не позволяйте отпугнуть вас от их изучения. Вы окажете себе этим медвежью услугу. Не стесняйтесь сверяться здесь со списком совместимости с браузерами. Как альтернативу можно использовать прекрасный скрипт IE9.js Dean Edward’а для предоставления этим селекторам поддержки в старых браузерах.
Во-вторых, при работе с библиотеками JavaScript, вроде популярного jQuery, всегда, где это возможно, старайтесь отдавать предпочтение использованию «родных» селекторов CSS3 перед пользовательскими методами/селекторами библиотеки. Ваш код от этого станет выполняться быстрее, так как движок селекторов может использовать исконный парсинг браузера охотнее, чем свой собственный.
Спасибо за прочтение урока по селекторам CSS, надеюсь, вы усвоили пару приемов!
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Тонкости использования селекторов аттрибутов в CSS
h2 id =»first-title» class =»magical» rel =»friend» > David Walsh h2 >
Существует множество селекторов атрибутов, мы не будем рассматривать все возможные варианты, рассмотрим наиболее полезные сценарии, встречающиеся в реальном мире.
[rel = external] — Точное совпадение значения атрибута
h1 rel =»external» > Attribute Equals h1 >
a href =»http://perishablepress.com» > Jeff Starr a >
a href =»http://davidwalsh.name» > David Walsh a >
a href =»http://accidentalninja.net/» > Richard Felix a >
Это единственный способ получить различные типы инпутов без добавления дополнительной разметки.
[rel *= external] — Атрибут содержит некоторое значение в любом месте
h1 rel =»xxxexternalxxx» > Attribute Contains h1 >
div id =»post_1″ > div >
div id =»post_two» > div >
div id =»third_post» > div >
[rel ^= external] — Атрибут начинается с определенного значения
h1 rel =»external-link yep» > Attribute Begins h1 >
Это будет соответствовать ссылке на главную и второстепенные страницы.
h1 rel =»friend external» > Attribute Ends h1 >
= external] — Атрибут содержит значение в списке разделенном пробелами
h1 rel =»friend external sandwich» > Attribute Space Separated h1 >
[rel |= external] — Атрибут содержит значение в списке разделенном тире
h1 rel =»friend-external-sandwich» > Attribute Dash Separated h1 >
[title = one][rel ^= external] — Совпадение нескольких атрибутов
h1 rel =»handsome» title =»Important note» > Multiple Attributes h1 >