基本用法

最近的工作对 GTM 要求很高啊,只能将 GTM 从头学起了,这篇文章翻自 Simo 大神的 10 Useful CSS Selectors.

Css Selector

.someClass 选择内容:

1
<div class="someClass">

#someId 选择内容:

1
<span id="someId">

div#myId 选择内容:

1
<div id="myId">

span.myClass div#myId 选择内容:

1
2
3
<span class="myclass">
<div id="myId"></div>
</span>

div#myId > a#contactUs 选择内容:

1
2
3
<div id="myId">
<a id="contactUs">Contact Us</a>
</div>

选择电话号码

a[href^=“tel:”] 可以选择出:

1
<a href="tel:xxxx"></a>

里面 xxx 的内容,可以用来收集加密后的电话号码。

选择 url

a[href*=“simoahava.com”] 可以选择出所有 href 元素后面包含 “simoahava.com” 的链接, 可以用来做内部链接排除。

监测 PDF 链接

a[href$=“.pdf”] 可以选择出所有 href 元素后面包含 “.pdf” 的链接, 来监测 pdf 链接的下载。

应对复杂的 DOM 结构

a[href=“simoahava.com”], a[href=“simoahava.com”] 可以统计点击链接的次数,而不是子元素 <span> 的次数.

1
2
3
<a href="mailto:some@email.com">
<span>some@email.com</span>
</a>

查询哪个元素被选中

form#myForm option:checked 选择出被选中的变量。

1
2
3
4
5
<form id="myform">
<option>Volvo</option>
<option selected="checked">Saab</option>
<option>Mercedes</option>
</form>

排除

a:not([href*=“simoahava.com”])** 排除掉所有 href 中有 “simoahava.com” 的链接。

选出第一个元素

ol > li:first-child 选出 <ol> 下面第一个 <li>

1
2
3
4
5
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

属性选择

a[data-gtm-event] 这里中括号代表属性,这代表选择出 a 链接元素下,data-gtm-event 的属性,不管他的值是什么。

避免过长的继承关系

header > h2 > a 代表三个继承关系。