Analytics

УСБ

Около четырех лет назад, Диспетчера тегов от Google выпустила новый триггер предикат имени соответствует модели CSS-селектору. Медленно, но верно, она превратилась в один из самых полезных мелких функций в ГТМ.

CSS

Хотя я уже писал о селекторах CSS и много раз прежде, я хотел обобщить всю необходимую информацию в одном руководстве. Для внешнего ресурса, я рекомендую закладок w3schools.com справочник селекторов в CSS. Но для повседневного использования селекторов в CSS в ГТМ, это руководство надеюсь пригодится.

Оглавление

  • Какие селекторы в CSS?
  • Селекторы в CSS в JavaScript-код
  • Используя документ.querySelector и документ.querySelectorAll
  • Используя элемент.матчи
  • Селекторы в CSS в Диспетчере тегов Google для
  • Щелкните элемент переменной
  • Матчи в CSS-селектору сказуемое
  • Селектор в CSS, ссылка для диспетчера тегов от Google
  • .класс
  • #ИД
  • элемент
  • элемент,элемент
  • нагревательный элемент
  • * (подстановки)
  • элемент>элемент
  • элемент+элемент
  • element1~element2
  • [атрибут]
  • [атрибут=значение]
  • [атрибут^=значение]
  • [атрибут$=значение]
  • [атрибут*=значение]
  • :проверил
  • :во-первых-ребенок
  • :во-первых-из-тип
  • :в прошлом-ребенок
  • :последний-из-тип
  • :не(селектор)
  • через через :nth-ребенок(Н)
  • Резюме
  • Не забудьте прочитать мою статью на 10 селекторы я считаю самым полезным в ГТМ — этот список более конкретных случаях использовать для вас, чтобы использовать. Если вам нужен конкретный способ проверить в CSS-селекторы с (вне ГТМ), проверьте w3schools.com УСБ тестер селектор.

    Какие селекторы в CSS?

    Вы можете использовать селекторы в CSS, чтобы цель любой элемент на веб-странице. Каждый элемент находится в уникальном положении в объектной модели документов (дом) и, таким образом, селекторы могут быть использованы, чтобы найти даже самые общие элементы.

    Иногда селекторы очень простая, но при этом очень надежен. Например, при использовании селектора, как див#автор, вы выбрали элемент, который выглядит как <див ИД="автор">. Так как он имеет идентификатор атрибута, это разумное ожидание, что это только такой элемент на странице, поэтому даже этот короткий селектор является очень мощным.

    С другой стороны, иногда все, что вы можете сделать, это использовать очень длинные сложные цепочки, потому что есть так мало, однозначно идентифицирующие признаки в сам элемент или его ближайшие предки. Таким образом, селектор может в конечном итоге выглядит так:

    #Главная > Статьи > разд.пост-содержание.уценка > див > п через через:nth-ребенок(12) а через через:nth-ребенок(2)

    Это не красиво, и он несет в себе дополнительный вес, что чем дольше и более сложные модели CSS-селектору, тем более хрупким он становится. Селектор выше будет признан недействительным, если один из элементов в цепи изменения положения или формы.

    Другими словами, всегда стремимся создать селектор, который является максимально простым без ущерба ее точности к цели точный элемент, который вы хотите.

    Селекторы в CSS возникла, Сюрприз-сюрприз, в каскадных таблиц стилей (СЅЅ). Таблицы стилей-это набор правил и деклараций, которые регулируют как элементы HTML не отображаются (и иногда взаимодействовали с) веб-странице на. Вот что типично декларация стиль может выглядеть так:

    ответ:парить, а:активный {
     текст-отделка: нет;
     шрифт-вес: жирный
    }

    Двух элементов, предшествующих { и разделенных запятой, являются селекторами, а две строки, содержащиеся в фигурных скобках являются декларациями. Это как если бы вы читали правила:

    1. Выбрать все ссылки (а), что в настоящее время завис над мышкой (наведите)
    2. И выделить все связи (а), что в настоящее время выполнен щелчок мыши (:активный)
    3. Затем удалить все текстовые украшения (электронная.подчеркнутый г) из них
    4. И установить свой шрифт вес для смелых

    УСБ-это своя, удивительно сложный дисциплина в веб-дизайне и разработке. Есть так много странных и прекрасных вещей вы можете делать с ним, от замены функциональности на JavaScript для запуска сложных переходов, используя аппаратное ускорение.

    Ну, в данном руководстве мы постараемся быть немного скромнее и сосредоточиться на том, как селекторы в CSS может быть использован с Диспетчера тегов от Google для JavaScript-код, чтобы сделать большинство из триггеров, теги и переменные, где выбора, запроса, или обработки необходимая элемент имеет первостепенное значение.

    Селекторы в CSS в JavaScript-код

    В языке сценариев JavaScript, вы будете часто бегать в УСБ селекторы по двум сценариям:

    1. Вам нужно получить конкретный элемент или элементы на странице.

    2. Вам нужно проверить, если данный элемент соответствует селекторе УСБ.

    Оба этих варианта очень актуальны в Диспетчере тегов Google для. Прежде чем мы перейдем, в как они работают ГТМ, давайте взглянем на обращение в яваскрипт селекторов в CSS.

    Используя документ.querySelector и документ.querySelectorAll

    Двух методах JavaScript, то чаще всего вы будете использовать с помощью селекторов CSS в документ.querySelector(селектора) и документ.querySelectorAll(селектор).

    Первый возвращает первый элемент на странице, который соответствует заданному селектору.

    Второй возвращает список всех элементов на странице, соответствующие заданному селектору.

    // Получить первый элемент исходящих ссылок на странице
    ВАР firstOutbound = документ.querySelector('а:не([с с href="mydomain.com"])');
    
    // Проверил все Получить флажок, радио-кнопки элементы на странице
    ВАР allChecked = документ.querySelectorAll('вход[тип="флажок"]:проверил,вход[тип="радио"]:проверено');
    

    Как вы можете видеть, селектор передается как строковый аргумент в метод.

    Помните, что в HTML-элементы являются объектами, и просто захватывая их делает часто мало смысла. Вместо этого, вы хотите что-то делать с теми объектами, например, разбирать какие-то имущество от них.

    // Получить первый элемент исходящих ссылок на странице
    ВАР firstOutbound = документ.querySelector('а:не([с с href="mydomain.com"])');
    
    // Пуш URL-адрес этой исходящую ссылку в случае уровень данных
    окна.уровень данных.поштовх({
     firstOutboundLinkURL: firstOutbound.функции функции getattribute('близко')
    });
    

    В примере выше мы использовали документ.querySelector получить первые исходящих ссылок (т. е. ссылка, которая не имеет mydomain.com в его рот), а потом мы толкаем его в уровень данных.

    Одна вещь, чтобы помнить, что документ.querySelectorAll возвращает не массив , а Списке_узлов. Это означает, что вы не можете использовать регулярные различными методами с тем, что метод возвращает. Вам придется прибегать к каким-то обходные пути, если вы, например, хотите карте() все элементы в списке, чтобы получить измененный массив в качестве результата.

    // Получаем все исходящие ссылки на странице
    ВАР allOutbound = документ.querySelectorAll('а:не([с с href="mydomain.com"])');
    
    // Создать массив всех значений атрибута href, в 
    ВАР allHrefValues = массив.прототип.карте.вызов(allOutbound, функция(ссылка) { возвращение ссылке.с полем href; });
    
    // Удалить все дубликаты 
    ВАР uniqueHrefValues = allHrefValues.фильтр(функция(Солар, индекс) { возвращение allHrefValues.метод метод indexOf(с атрибута href) === индекс; });
    

    Как видите, для того, чтобы запустить карту() метод с перечнем возвращаемых документов.querySelectorAll, вы должны вызвать метод из массива прототип. Это хорошая вещь, чтобы иметь в виду, если вы когда-нибудь найти себе работу с документом.querySelectorAll.

    Используя элемент.матчи

    Если вы хотите проверить, если любой элемент соответствует определенный код CSS-селектору, можно использовать спички() способ такой:

    // Проверяем, если нажата элемент исходящую ссылку
    checkIfClickedElementIsOutbound функция() {
     ВАР элемент = {{щелчок по элементу}};
     если (элемент.матчи('а:не([с с href="mydomain.com"])') {
     возвратите true;в
     } еще {
     возвращает значение false;
    }
    }
    

    Вы вызываете играм() метод на сам элемент (элемент должен быть в HTML-элемент), и как querySelector / querySelectorAll, мы передаем селектор в качестве аргумента. Метод возвращает значение правда на матч, и ложное в противном случае.

    Насчет матчей() заключается в том, что он не имел звездной поддержка браузера, так что если вы хотите использовать эти методы с Интернет Эксплорер в виду, вы, возможно, потребуется реализовать полифилл , чтобы расширить поддержку (см. здесь для вдохновения).

    К счастью, спички() метод абстрагируется в Диспетчере тегов Google и при использовании триггеров, который является на сегодняшний день наиболее часто используется случае. Так что давайте начнем!

    Селекторы в CSS в Диспетчере тегов Google для

    В Диспетчере тегов в Google, вы найдете селекторы в CSS в нескольких местах.

    Вы можете использовать их как метод выбора в переменную элемент дом:

    CSS

    С помощью таблиц CSS-селектор позволяет выбрать конкретный элемент, которые не могут иметь атрибут идентификатор (единственный выбор метода).

    Вы также можете найти такой же вариант в элементе видимость триггера:

    CSS

    В то время как дом-элемент переменной только возвращает первый соответствующий элемент (таким образом, будучи похож на документ.querySelector), элемент видимости триггер может быть установлен в створ все соответствующие элементы, делая селекторы в CSS супер мощный в данном конкретном типа триггера.

    Третий и однозначно самый полезный сценарий для таблицы CSS селекторы в Диспетчере тегов Google-а это соответствует модели CSS-селектору предиката, когда используется вместе с {{щелчок по элементу}} встроенной переменной.

    Щелкните элемент переменной

    За щелчок по элементу переменной-это встроенная переменная, что вам нужно включить , прежде чем вы можете использовать. Самый простой способ, чтобы включить его, чтобы перейти к переменным через ГТМ главной навигации и нажмите на синюю настроить кнопку в верхнем углу содержимого.

    CSS

    В оверлей, который откроется, установите флажок щелкните элемент , и вы сделали. Теперь вы можете выбрать Кнопкой Мыши элемент переменной в переменную раскрывающиеся ГТМ.

    Щелкните элемент возвращает в HTML-элемент , который был целью автоматического событие триггерное действие. Другими словами:

  • Он возвращает выбранного элемента , когда с помощью мыши / все элементы и нажмите кнопку / только одной триггеров.

  • Она возвращает представленные формы элемента при использовании формы представления триггера.

  • Он возвращает подобраны элемента, который стал виден при использовании элемента видимость курок.

  • Потому что он возвращает в HTML-элемент, вы можете использовать его в ваш пользовательский код HTML-теги и пользовательские переменные в JavaScript вместе с типичными для HTML-элемент методов, таких как функции, функции getattribute, метода метода appendChild, и да, играм.

    В ГТМ, вы будете использовать его чаще, я уверен, достаточно, чтобы сказать, с играми в CSS-селектору сказуемое в форму кнопку и триггеры. Это не то, что полезно с элементом видимости триггера, так как вы уже указать набор согласующих элементов с настройкой для CSS-селектор в триггере.

    Матчи в CSS-селектору сказуемое

    Вы можете воспользоваться играм в CSS-селектору вызвать предикат вместе с щелкните элемент переменной, чтобы проверить, если элемент соответствует конкретному селектора (отмена).

    Это особенно полезно с все элементы триггер, так как он действительно срабатывает, когда что-нибудь на странице нажата, и вы можете использовать в CSS селекторы, чтобы размежевать тег, к которому триггера подключен от стрельбы слишком часто.

    Чтобы заставить его работать, вы должны сначала проверить этот триггер срабатывает на…некоторые клики/некоторые клики по ссылкам/некоторые формы вариант, выберите щелчок по элементу переменную из переменной селектора играм в CSS-селектору предикат от предиката селектора, а затем введите селектор в поле справа, Вот так:

    CSS

    Одна вещь иметь в виду состоит в том, что все элементы действительно отражает точную элемент пользователь нажал. Таким образом, это может быть что-то вложен в элемент, который вы на самом деле разработали селектор. Все элементы триггер, вы должны сделать либеральное использование подстановочного знака (*) селектора. Прочитайте эту статью для получения дополнительной информации.

    В ссылке Глава ниже, я включил, что нажать курок, как будет выглядеть для всех селекторов, перечисленных в справочнике.

    Селектор в CSS, ссылка для диспетчера тегов от Google

    Ссылку ниже является модифицированной (облегченную) версию отличную от w3schools ресурсов. Я специально в разных селекторов с воображаемыми тэг случаях Гугл использует менеджер в уме.

    Помните, что вы можете комбинировать селекторы, чтобы определить различные аспекты элемента. При совмещении селекторы, положить их один за другим без пробелов между ними. Например, чтобы охватить все теги<a>и элементы, которые имеют автора, класс, Симо в качестве идентификатора, а также исходящих ссылок, использовать что-то вроде этого:

    а.автор#Симо:не([с с href="mydomain.com"])

    Заказ будет несущественный, но это общепринято, чтобы добавить псевдо-классы (например :проверено, :не) до конца чтения.

    .класс

    Играм элементы данного класса в качестве одного из имен классов в классе атрибута.

    Образец структуры HTML-код

    <класс="изюминкой автора" с с href="/автор-страница/">
     <охватывают>Симо агавы</пролет>
    </а>

    Образец триггера

    CSS

    Селектор

    .автор

    Результат

    Триггер срабатывает при щелчке по ссылке. Нажимает на элемент<span>, что работать тоже, так как просто ссылки курок автоматически извлекает закрывает оборачивать в тег<a> элемент, что было на самом деле нажал.

    #ИД

    Играм элементы, которые имеют идентификатор в качестве значения их идентификаторов атрибутов.

    Образец структуры HTML-код

    <див класс="дата">
     <а с href="/архив">
     <Спан ИД="дата">2019-04-09</пролет>
    </а>
    </див>

    Образец триггера

    CSS

    Селектор

    #дата

    Результат

    Триггер срабатывает, если <Спан ИД="дата">...</пролет>, что элемент нажали.

    элемент

    Совпадения элементов данного элемента (например, в течение одной, Гуи только для изображений).

    Образец структуры HTML-код

    <класс="автор" с с href="/автор-страницы">
     <ИМГ ИД="Симо" СРЦ="simo.jpg"/>
    </а>

    Селектор

    ИМГ#Симо

    Образец триггера

    CSS

    Результат

    Триггер срабатывает при нажатии элемент <ИМГ ИД="Симо".../>. Как вы можете видеть, селектор сочетает в себе оба элемента и идентификатор, т. е. совпадающего элемента должны быть как изображения, так и есть идентификатор Симо.

    элемент,элемент

    Соответствует элементам, которые могут быть отобраны с любой из селекторов через запятую (можно добавить несколько селекторов, разделенных запятой).

    Образец структуры HTML-код

    <класс="автор" с с href="/автор-страницы">
     <ИМГ ИД="simo_img" СРЦ="simo.jpg"/>
     <Р ИД="simo_name">название: Симо агавы</п>
    </а>

    Образец триггера

    CSS

    Селектор

    ИМГ#simo_img, п#simo_name

    Результат

    Триггер срабатывает, если нажать земель на <ИМГ ИД="simo_img".../> или <Р ИД="simo_name">...</Р>.

    нагревательный элемент

    Соответствует самым правым элементом, когда он находится внутри левого элемента в дереве дом. Отношения никак не должны быть родитель-ребенок — это достаточно, что левый элемент обертывания правильного элемента в какой-то момент.

    Образец структуры HTML-код

    <раздел с идентификатором ID="главная">
     <див ИД="статья">
     <а с href="/архив">
     с помощью тега <Н1>Привет мир!</Н1>
    </а>
    </див>
    </раздел>

    Образец триггера

    CSS

    Селектор

    раздел#главная Н1

    Результат

    Триггер срабатывает, если нажать на землях теге теге<H1>Привет мир!</Н1> потому что один из его оборачивать элементы матчи первого селектора (раздел главная).

    * (подстановки)

    Соответствует любому элементу. Чрезвычайно полезно при использовании с кнопкой / всех элементов триггера.

    Образец структуры HTML-код

    <див ИД="Нави">
    <ул>
     <ли><а с href="/главная">Главная</a>и</литий>
     <ли><а с href="/продукция">продукция</а></литий>
     <ли><а с href="/контакты">напишите нам</A>и</литий>
    </ул>
    </див>

    Образец триггера

    CSS

    Селектор

    див#Нави, разд#Нави *

    Результат

    Триггер срабатывает при <див ИД="Нави"> элемент, или любой из ее вложенных элементов (<ул>, <литий> и <а>) кнопки.

    Селектор див#Нави, разд#Нави *. Основываясь на том, что вы уже узнали выше, это на самом деле двух селекторов, див#Нави и див#нави *, а триггер будет срабатывать при любом нажатии.

    Первый селектор сопоставляется кликов непосредственно на <див ИД="Нави"> элемент. Второй селектор сопоставляется кликов на любой элемент, который обернут <див ИД="Нави">. Пробел-это важно. Если второй селектор были див#Нави > *, он будет соответствовать только нажимает на <ул>, так как это только прямым потомком <див ИД="Нави">.

    элемент>элемент

    Матчи самого правого элемента, когда его прямым родителем является элемент слева.

    Образец структуры HTML-код

    <раздел с идентификатором ID="главная">
     <див ИД="статья">
     <а с href="/архив">
     <Н2>Привет мир!</Н2>
    </а>
    </див>
    </раздел>
    <раздел с идентификатором ID="конец">
     <див ИД="нижний колонтитул">
     <Н2>прощай, мир!</Н2>
    </див>
    </раздел>

    Образец триггера

    CSS

    Селектор

    див>Н2

    Результат

    Триггер срабатывает, если нажать на землях <Н2>прощай, мир!</Н1> , поскольку его прямой родитель является тег<див>. Это будет не огонь по <Н2>Привет мир!</Н2> потому что это элемент прямой родитель <а>.

    элемент+элемент

    Соответствует самым правым элементом, если речь идет непосредственно после самого левого элемента. Они должны иметь одного родителя.

    Образец структуры HTML-код

    <див ИД="автор">
     <ИМГ СРЦ="/author.jpg" идентификатор="author_image"/>
     <охватывают>имя автора</промежуток>
    </див>

    Образец триггера

    CSS

    Селектор

    ИМГ#author_image+п

    Результат

    Триггер срабатывает, если клик попадает на элемент<span>, что, потому что сразу после <ИМГ ИД="author_image"/>.

    element1~element2

    Матчи самого правого элемента, если он предшествует левого элемента. Они должны иметь одного родителя. Другими словами, это чуть менее строгие, чем предыдущий селектор, в том, что предыдущий элемент не должен быть сразу рядом с целевым элементом.

    Образец структуры HTML-код

    <див ИД="автор">
     <ИМГ СРЦ="/author.jpg" идентификатор="author_image"/>
     <охватывают>имя автора</промежуток>
     <а с href="https://www.simoahava.com">автор главная страница</а>
    </див>

    Образец триггера

    CSS

    Селектор

    ИМГ#author_image~а

    Результат

    Триггер срабатывает, если нажать земель на <а>, так как он предваряется <ИМГ ИД="author_image"/>.

    [атрибут]

    Если элемент с указанным атрибутом.

    Образец структуры HTML-код

    <див ИД="main_content">
     <данные имя див="gtm_example">
     <охватывают>примеры ГТМ</промежуток>
    </див>
    </див>

    Образец триггера

    CSS

    Селектор

    див[данные-наименование]>пролет

    Результат

    Триггер срабатывает, если клик попадает на элемент, например<span>, потому что его прямой родитель является тег<div>и с данные-имя атрибута.

    [атрибут=значение]

    Играм, если элемент имеет атрибут с точным значением.

    Образец структуры HTML-код

    <див ИД="main_content">
     <данные имя див="gtm_example">
     <охватывают>ГТМ пример</промежуток>
    </див>
     <данные имя див="second_gtm_example">
     <охватывают>другой пример ГТМ</пролет>
    </див>
    </див>

    Образец триггера

    CSS

    Селектор

    див[данные-имя="second_gtm_example"]>пролет

    Результат

    Триггер срабатывает, если нажать земель на второй элемент, например<span>, потому что только оно имеет непосредственный родитель, чьи данные-имя атрибута имеет значение second_gtm_example.

    [атрибут^=значение]

    Играм, если элемент имеет заданный атрибут, значение которого начинается с указанной строки.

    Образец структуры HTML-код

    <див ИД="main_content">
     <Спан ИД="product_12345">
     Продукт 12345
    </пролет>
     <Спан ИД="product_23456">
     Продукт 23456
    </пролет>
     <Спан ИД="attachment_12345">
     Вложение 12345
    </пролет>
    </див>

    Образец триггера

    CSS

    Селектор

    промежуток[ИД^="продукт"]

    Результат

    Триггер срабатывает, если нажать земель на одном из двух элемент<промежуток> элементов, чей идентификатор начинается с продукта. Это будет не огонь, если нажать земель на третий срок, потому что элемент с идентификатором начинается с привязанности.

    [атрибут$=значение]

    Играм, если элемент имеет заданный атрибут, значение которого заканчивается строка.

    Образец структуры HTML-код

    <див ИД="main_content">
     <Спан ИД="product_12345">
     Продукт 12345
    </пролет>
     <Спан ИД="product_23456">
     Продукт 23456
    </пролет>
     <Спан ИД="attachment_12345">
     Вложение 12345
    </пролет>
    </див>

    Образец триггера

    CSS

    Селектор

    промежуток[ИД$="_12345"]

    Результат

    Триггер срабатывает, если нажать земель от <пядь> или последний элемент, например<span>, так как оба элемента ИД атрибутами конца с _12345. Он не выстрелит, если нажать на землях <Спан ИД="product_23456">, так что код не заканчивается _12345.

    [атрибут*=значение]

    Играм, если элемент имеет заданный атрибут, значение которого содержит указанную строку.

    Образец структуры HTML-код

    <див ИД="автор">
     <Спан ИД="simo_ahava_profile">Симо профиль</пролет>
     <Спан ИД="profile_benjamin_ahava">Бенджамин профиль</пролет>
     <Спан ИД="derek_anderson">Дерек профиль</пролет>
    </див>

    Образец триггера

    CSS

    Селектор

    див#автор > период[ИД*="агава"]

    Результат

    Триггер срабатывает, если клик попадает на один из первых двух , например, например<span> элементов, так как они имеют идентификаторы, которые содержат строку агава. Он не будет срабатывать третий элемент, например<span> , потому что элемент атрибута идентификатор не содержит строку агава.

    :проверил

    Соответствует ли данный элемент проверяется (радио-кнопки, флажки, и с опцией<Option> элементов В выбрать меню).

    Образец структуры HTML-код

    <форме ИД="связаться с нами">
     Мое имя: <тип входного="текст" имя="имя" /><БР />
     Я согласен на все <тип входного="флажок" название="согласие" /><БР />
     <тип входного="отправить" />
    </форма>

    Образец триггера

    CSS

    Селектор

    введите[имя="согласия"]:проверено

    Результат

    Триггер срабатывает, если нажать земель на флажке , когда он установлен (т. е. пользователь снимает его).

    :во-первых-ребенок

    Играм, если данный элемент является первым ребенком своего родителя.

    Образец структуры HTML-код

    <ул ИД="main_navigation">
    <литий>для дома</литий>
     <ли><а с href="/продукция">продукция</а></литий>
     <ли><а с href="/контакты">контактная информация</а></литий>
    </ул>

    Образец триггера

    CSS

    Селектор

    ул main_navigation# > ли:первого ребенка

    Результат

    Триггер срабатывает, если нажать на землях <литий>для дома</литий> , поскольку он является первым дочерним элементом своего непосредственного родителя.

    :во-первых-из-тип

    Играм, если данный элемент является первым элементом его тип (например, п, ИМГ, пядь) своего родителя.

    Образец структуры HTML-код

    <див ИД="author_info">
     <а с href="/автор">Симо агавы</а>
     <Р>веб-аналитика для разработчиков</п>
     <Р>на укулеле и ДЭТА энтузиастов</п>
    </див>

    Образец триггера

    CSS

    Селектор

    див#author_info > п:во-первых-из-тип

    Результат

    Триггер срабатывает, если нажать на землях <Р>веб-аналитика для разработчиков</п> так это первый <р> под своего родителя.

    :в прошлом-ребенок

    Играм, если данный элемент является последним дочерним элементом своего родителя (обратным :сначала-ребенок).

    Образец структуры HTML-код

    <ул ИД="main_navigation">
    <литий>ГТМ</литий>
    <литий>укулеле</литий>
    <литий>дэт-метал</литий>
    </ул>

    Образец триггера

    CSS

    Селектор

    ул#main_navigation > ли:в прошлом-ребенок

    Результат

    Триггер срабатывает, если нажать на землях <литий>дэт</литий> , поскольку он является последним дочерним элементом своего родителя.

    :последний-из-тип

    Играм, если данный элемент является последним элементом своего типа своего родителя.

    Образец структуры HTML-код

    <див ИД="author_info">
     <а с href="/автор">Симо агавы</а>
     <Р>веб-аналитика для разработчиков</п>
     <Р>на укулеле и ДЭТА энтузиастов</п>
    </див>

    Образец триггера

    CSS

    Селектор

    див#author_info п:последний-из-тип

    Результат

    Триггер срабатывает, если нажать на землях <р>на укулеле и дэт-метал энтузиастов</р> , поскольку он является последним <Р>в рамках своего родителя.

    :не(селектор)

    Играм, если данный элемент совсем не соответствуют селектор в скобках.

    Образец структуры HTML-код

    <див ИД="автор">
    <Р>
     <а с href="https://www.simoahava.com/">Главная страница</а>
    </п>
    <Р>
     <а с href="https://tagmanager.google.com/">хобби</A>и в
    </п>
    </див>

    Образец триггера

    CSS

    Селектор

    а:не([атрибут*="simoahava.com])

    Результат

    Триггер срабатывает, если нажать земель по второй ссылке (<а с href="https://tagmanager.google.com/">любимые хобби</а>). Это потому, что в CSS-селектору цели все соединения элементов (<а>), которые не соответствуют в УСБ селектор [атрибут*="simoahava.com"]. Другими словами, ссылка должна не иметь значения атрибута href атрибут, содержащий строку simoahava.com.

    через через :nth-ребенок(Н)

    Соответствует ли данный элемент энного ребенка своего родителя, где Н — количество перешло в скобках.

    Образец структуры HTML-код

    <ул ИД="main_navigation">
    <литий>ГТМ</литий>
    <литий>укулеле</литий>
    <литий>дэт-метал</литий>
    </ул>

    Образец триггера

    CSS

    Селектор

    ул#main_navigation > литий через через:nth-ребенок(2)

    Результат

    Триггер срабатывает, если нажать на землях <литий>гитара</литий> так это второй ребенок (Н-го ребенка(2)) своего родителя.

    Резюме

    Я говорил это много раз, но я серьезно думаю, что в CSS-селекторы высоко наверх с помощью JavaScript и регулярных выражений в списке вещей, которые вы должны научиться, если вы хотите освоить Диспетчере тегов Google для.

    Большая веб-аналитики часть браузерных, особенно при отслеживании взаимодействия, коренится в умении отслеживать взаимодействия с конкретными элементами. Часто, мы рекомендуем использовать идентификатор и класс атрибутов этих элементов, но очень часто, что они на самом деле не имеют эти атрибуты.

    Именно в этих ситуациях, что в CSS селекторы блеск. Они позволяют точно определить каждый и любой элемент на любой странице, поскольку каждый элемент всегда есть уникальные позиции, которые могут быть направлены с селектора.

    Просто помните мой совет от более ранних — всегда стремитесь к селектору, что это просто, как это возможно без ущерба для его способности нацелены на конкретные элементы, которые вы хотите.

    Related posts

    Небольшое расследование расследования по делу хакера, взломавшего Twitter (обновлено)

    admin

    Что делать, если забыт код от замка чемодана?

    admin

    «Мобильный контент» бесплатно, без смс и регистраций. Подробности мошенничества от Мегафона

    admin

    Leave a Comment